基本上,我想有四个连续的二次 div
。
但在第一行中,前两个正方形合并为一个矩形。
方 block 的大小应自动适合浏览器窗口的大小。 重要:我想要在 div 之间留一点边距。
我的HTML:
<div id="service-wrapper">
<div class="double-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
<div class="single-col"></div>
</div>
和我的CSS:
#service-wrapper
{
height: auto;
}
.single-col,
.double-col
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 10%;
border: 1px solid blue;
padding: 2%;
display: inline-block;
}
.single-col
{
width: 25%;
}
.double-col
{
width: 50%;
}
最佳答案
你需要给 div 添加一个 float
属性,让它成为一个 block
元素而不是 inline-block
。
我也更改了你的类名,所以你有一个 col
的公共(public)类,它假设每一列都是单一的,除非它被 double
类覆盖.从我的示例中可以看出,这基本上意味着您需要维护的标记和 CSS 更少。
HTML
<div class="columns">
<div class="col double"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
CSS
.col
{
padding-bottom: 23%; /* padding-bottom = width value - 2 (1 each for margin top and bottom values */
background: #f00;
float: left;
width: 23%;
margin: 1% 1%;
}
.col.double
{
width: 48%; /* width = .col width * 2 + 2 (1 each for margin left and right values */
}
或者,这里有一些基于 JavaScript 的砌体布局示例,它们可以进一步扩展您的 block 的功能。
关于css - 二次响应式 html div 保持纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22803472/