这是一些示例标记：
<!DOCTYPE HTML><HTML xml:lang="en-gb" lang="en-gb" ><head> <Title>Responsive 2 col</Title> <style type="text/CSS"> .colcontainer { wIDth: auto; overflow:hidden; border: solID 1px red; } .leftcol { wIDth: 49%; float: left; margin-right:10px; border: solID 1px blue; } .rightcol { wIDth: 49%; float: left; border: solID 1px green; } </style></head><body> <div > <div > Here is a paragraph which has enough text to cause it to take up a fair amount of wIDth if left to its own devices. </div> <div > A smaller paragraph. </div> </div></body> 这看起来还不错,但是当您压缩浏览器宽度以使div换行时,它们仍然只占用容器宽度的50％.通过移除宽度：49％,它可以很好地包裹并填充可用的宽度,但是在未包裹时不再均匀地分割列.是否有任何方法可以使它们在包裹时填充可用的宽度,但在未包裹时占用可用宽度的50％？
解决方法 这里你需要多个东西,首先你要制作一个响应式网格,所以每当你做出响应式的事情时,请确保使用下面的CSS片段* { margin: 0; padding: 0; -moz-Box-sizing: border-Box; -webkit-Box-sizing: border-Box; Box-sizing: border-Box;} 这将改变盒子模型的行为,并将计算盒子内的填充和边框而不是外部.
其次,如果要包装元素,可以使用@media查询声明断点,这样它们就不会被压扁.
Demo(调整窗口大小并查看效果)
总结以上是内存溢出为你收集整理的响应50％2列html / css全部内容，希望文章能够帮你解决响应50％2列html / css所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）