将div放在一起，一个放在另一个下面

Question

我想根据显示的图像放置div。最上面的那些已经完成但是无法将底部两个放在我当前的样式表中如下：

 #container {
   position: relative;
   height: 400px;
   width: 100%;
   min-width: 400px;
   margin: 0 auto;


}
#left, #right {
    position: absolute;
    bottom: 201px;
}
#left {
    left: 0;
    width: 484px;
    height: 195px;


}
#right {
    right: 0;
    width: 508px;
    height: 196px;


}

我的容器还包含所有div

有人请帮忙

Answer 1

与此类似的内容 - JSFiddle？

HTML：

<div class="row">
    <div class="col1">One</div>
    <div class="col2">two</div>
</div>
<div class="row">
    <div class="col1">One</div>
    <div class="col2">two</div>
</div>

CSS：

.row{ overflow: hidden; margin: 4px; }
.col1, .col2{ float: left; width: 250px; height: 100px; }
.col1{ background: red; }
.col2{ background: green; }