css - 如何安排一个在另外两个之下？

Question

我正在尝试实现一个<div>有 3 个 sub<div>的（见图）

div1 里面有一个图像，它的高度用 .css 固定

.image_inside_div1
{
height:6em;
}

.div1
{
float:left; /* so it fits to the image */
}

.div2
{
width:50%; /* not a great solution. How do I fill the rest (remaining from div1) of outerdiv's width? */
}

.div3
{
/*This is my primary question. How do implement div3 ?*/
width:100%;
position: ???
bottom: 0 ???
height: ???
}

谢谢！

Answer 1

用另一个 div 包装 div1 和 div2。这就对了。

<div>
    <div>
         <div id="div1"></div>
         <div id="div2"></div>
    </div>
    <div id="div3"></div>
</div>

Answer 2

看看这个小提琴http://jsfiddle.net/C6Q46/。重要信息

.outer:after { content: " "; display: block; overflow: hidden; clear: both; height: 0; }
.div2 { overflow: hidden; }
.div3 { width: 100%; clear; both; }

Answer 3

.div3
{
/*This is my primary question. How do implement div3 ?*/
width:100%;
float: left;
clear:both;
}