html - float div 覆盖下一个 div

Question

我想定位一个<div>在一条线上，然后是另一个 <div>之后。

我设置第一个<div>向左浮动，然后放入下一个。

但是，第一个 div 覆盖了第二个。它没有将第二个定位在第一个之后(如我所料)- 它是从同一个位置开始的。

这是代码(在 JSFiddle 上:http://jsfiddle.net/LcrA9/)

<div id="container">
    <div id="one">
    </div>
    <div id="two">
    </div>
</div>

#container {
    width: 300px;
    height: 500px;
}
#one {
    width: 100px;
    height: 500px;
    float: left;
    background-color: green;    
}
#two {
    width: 200px;
    height: 500px;
    background-color: blue;
}

Answer 1

float 第二个 div，或放置一个等于第一个 div 宽度的 margin-left:

Floating JSFiddle :

#two {
    width: 200px;
    height: 500px;
    background-color: blue;
    float: left;
}

Margin-left JSFiddle

#two {
    width: 200px;
    height: 500px;
    background-color: blue;
    margin-left: 100px;
}

@PlantTheIdea 关于使用 display: inline-block 的建议是合理的。不过，这个问题确实有一个目的:当您希望第二个 div 占用剩余空间时(并且不想使用 display: table 例如)

Here's an example of that too :

#container {
    height: 500px;
    clear: both;
}

#one {
    width: 100px;
    height: 500px;
    float: left;
    background-color: green;    
}

#two {
    height: 500px;
    background-color: blue;
    margin-left: 100px;
}