Question

我需要像上面那样设计网格样式。我唯一遇到的问题是在同一行中彼此叠加的2个盒子。有没有人建议如何做到这一点？干杯！

的CSS：

       { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }

.column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }

.row .one { width: 8.33% }
.row .two { width: 16.66% }
.row .three { width: 25% }
.row .four { width: 33.33% }
.row .five { width: 41.66% }
.row .six { width: 50% }
.row .seven { width: 58.33% }
.row .eight { width: 66.66% }
.row .nine { width: 75% }
.row .ten { width: 83.33% }
.row .eleven { width: 91.66% }
.row .twelve { width: 100% }


.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }

HTML：

        <div class="row">
            <div class="three columns">
                ...
            </div>
            <div class="nine columns">
                ...
            </div>
        </div>
    <div class="row">
<div class="six columns">
        ...
    </div>
<div class="six columns">
       this is the div i need to split up into 2 divs on top of eachother
    </div>
</div>

Answer 1

我会使用float：right，并且清除：就在底部的那个上。

CSS网格样式与图片

1 个答案: