Css 保持纵横比的二次响应html div

基本上我想要四个二次

div

排成一行。 但在第一行，前两个正方形合并成一个矩形。 正方形的大小应自动适应浏览器窗口的大小重要：在两个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>

    #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%;
    }        

---

您需要向divs添加一个

float

属性，并让它成为

block

元素，而不是

inline block

我也更改了您的类名，因此您有一个公共类

col

，该类假设每一列都是单列，除非它被

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>

<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>

或者，下面是一些基于JavaScript的masonary布局示例，它们可以进一步扩展块的功能

---

尝试此解决方案来创建二次

div

元素，非常适合响应性web设计

请看这里：

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>

<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>

---

阅读文章了解更多信息。

你尝试过什么吗？发布你的一些代码…我还想在方块之间留一个边距。我怎么能意识到呢？我已经编辑了我的答案，所以它也包括了一个页边空白。