带图片的 CSS 网格样式

Question

http://imgur.com/IAHUR4U

我需要像上面那样设计一个网格。我唯一有问题的是同一行中彼此重叠的 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 和 clear:right。