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/

它适用于所有浏览器。