css - 二次响应式 html div 保持纵横比

Question

基本上，我想有四个连续的二次 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%;
    }        

Answer 1

你需要给 div 添加一个 float 属性，让它成为一个 block 元素而不是 inline-block。

JSFiddle DEMO

我也更改了你的类名，所以你有一个 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 的功能。

• > Isotope
• > Masonry