Question

基本上我想连续四个divs。但在第一行中，前两个方块合并为一个矩形。方块的大小应自动适合浏览器窗口的大小。重要：在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的公共类，它假设每一列都是单一的，除非它被一个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的masonary布局的一些示例，它们可以进一步扩展块的功能。

Answer 2

尝试使用此解决方案来创建二次 div元素，非常适合响应式网页设计。

见这里：JSFiddle DEMO

<强> 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
{
    margin: 2%;
    background: #f00;
    float: left;
    width: 21%;   
}
.col:before
{
    content: "";
    display: block;
    padding-top: 100%;
}
.double
{
    width: 46%;
}
.double:before
{
     padding-top: 45.6%;
}

阅读 this 文章了解详情。

二次响应html div保持纵横比

2 个答案: