CSS Divs定位

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应首先水平向右伸展。 Div2根本不应该伸展。它可以被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/

它适用于所有浏览器。

Answer 2

你可以这样做

1. 为parent div提供固定的width。使用overflow:hidden;包含divs
2. 将内部floats上的divs更改为display:inline-block;
3. 在width
右侧设置div

4. 在左侧max-width

   设置div

   .DivParent{
       border: 1px solid #000000;
       padding: 0;
       margin: 0;
       overflow:hidden;
       width:550px;
   }
   
   .Div1{
       border: 4px solid #FF0000;
       padding: 0;
       margin: 0;
       max-width:400px;
       display:inline-block;
   }
   
   .Div2{
       border: 4px solid #00FF00;
       padding: 0;
       margin: 0 0 0 10px;
       width:120px;
       display:inline-block;
       vertical-align:top;
       height:100px;
   }
   

示例： http://jsfiddle.net/P6SJq/

Answer 3

查看此来源。这对你有所帮助！

.DivParent
    {
        border: 1px solid #000000;
        padding: 0;
        margin: 0;
    overflow:hidden;
    }
    .Div1
    {
        border: 4px solid #FF0000;
        padding: 0;
        margin: 0;
        float:left;
        min-width:300px;
        max-width:900px;
        min-height:100px !important;
        height:auto;
        width:auto;
    }
    .Div2
    {
        border: 4px solid #00FF00;
        width:150px;
        height:50px;
        float:left;
    }

Answer 4

浮动意味着..好吧，漂浮。不固定。为了防止div2在其中一个div下移动必须是静态的，可能是左边的。但是，这意味着您必须将div2向右浮动（并将其放在div1之前）。问题是div2总是在右边，即使div1的内容很小。

我认为只有你拥有的html才能做你想要的事情。你必须使用一些容器div来防止包装。