CSS Div 定位

Question

我正在尝试更好地理解 CSS。有人可以帮我解决这个问题吗？我有以下 HTML:

<div class="DivParent">
<div class="Div1"></div>
<div class="Div2"></div>
</div>

我需要如下图所示放置它们: http://i150.photobucket.com/albums/s99/dc2000_bucket/divs_diagram.png

我编写了以下 CSS:

.DivParent
{
    border: 1px solid #000000;
    padding: 0;
    margin: 0;
}
.Div1
{
    border: 4px solid #FF0000;
    padding: 0;
    margin: 0;
    float: left;
}
.Div2
{
    border: 4px solid #00FF00;
    padding: 0;
    margin: 0 0 0 10px;
    float: left;
}

Div1 应首先水平向右拉伸(stretch)。 Div2 根本不应该拉伸(stretch)。它可以被 Div1 向右推，直到 Div2 没有更多的空间向右移动。之后 Div1 应该开始向下(或垂直)增长。

如果两个 Div 都不够宽，则上述方法有效，但 Div2 只是被推到 Div1 下面。如何使 Div2 始终位于 Div1 的右侧？

Answer 1

您可以像这样使用 display:table 属性:

.DivParent
{
    border: 1px solid #000000;
    padding: 0;
    margin: 0;
    display:table;
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.Div1
{
    border: 4px solid #FF0000;
    padding: 0;
    margin: 0;
    display:table-cell;
}
.Div2
{
    border: 4px solid #00FF00;
    width:100px;
    height:50px;
}

检查此 http://jsfiddle.net/XBZad/2/

编辑

检查此项 http://jsfiddle.net/bGvAg/2/

它适用于所有浏览器。