大佬教程收集整理的这篇文章主要介绍了html5 – 响应式布局不均匀高度,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
为了简要总结设计,有3列容器,其中容器具有不均匀(动态生成)的高度但具有相同(流体)宽度.它们需要布置成它们按照从左到右的数字顺序排列;即顶行1-2-3,第二行4-5-6,依此类推.
现在,真正破坏我的坚果的是试图使这个排列整齐,而容器之间没有很多不必要的“垂直间距”.我已经创建了以下模拟代码(也可以作为代码块下面的JSfiddle)来说明:
<div class="wrapper" id="wrapper"> <div class="container small" id="container_1">1</div> <div class="container large" id="container_2">2</div> <div class="container small" id="container_3">3</div> <div class="container medium" id="container_4">4</div> <div class="container small" id="container_5">5</div> <div class="container medium" id="container_6">6</div> <div class="container large" id="container_7">7</div> <div class="container medium" id="container_8">8</div> <div class="container large" id="container_9">9</div> <div class="clearfix"></div> </div>
CSS
.wrapper { width: 100%; padding: 5%; } .clearfix { clear: both; } .container { display: block; float: left; width: 25%; margin: 2.5%; color: white; font-weight: bold; text-transform: uppercase; } .small { height: 100px; BACkground: red; } .medium { height: 150px; BACkground: green; } .large { height: 200px; BACkground: blue; }
JSfiddle:http://jsfiddle.net/tzikas/MYgNx/
注意:由于列布局本身最终会根据设备宽度分解为两个/@L_944_9@列,因此我在JSfiddle中包含了@L_944_9@简单的“切换布局”按钮来模拟它.
我想帮助解决的问题如下:
>我如何摆脱每个之间过多的垂直间距
例如,“1”和“5”或“2”和“6”?
>我如何获得“4”的位置
本身低于“1”而不是低于“3”(同时也解决了
前一点)?
以上是大佬教程为你收集整理的html5 – 响应式布局不均匀高度全部内容,希望文章能够帮你解决html5 – 响应式布局不均匀高度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。