Question

我想在一行上放置一个<div>，然后在另一个<div>上放置。{/ p>

我将第一个<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

浮动第二个div，或者将margin-left等于第一个div的宽度：

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;
}

Answer 2

你需要抛弃花车，发现display:inline-block;我的朋友！

您的HTML：

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

你的CSS：

#container {
    width: 300px;
    height: 500px;
}

#one,#two {
    display:inline-block;
    vertical-align:top;

    /* Old IE */
    *display:inline;
    *zoom:1;
}

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

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

Here is an updated jsFiddle.

我消除两个div之间空间的原因是因为如果有空格，inline-block会在它们之间留出4px的余量。旧的IE版本适用于IE7及以下版本。

Answer 3

float:left s

上需要div

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

Fiddle

Answer 4

你可以通过使第二个div浮动来解决这个问题：

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

Answer 5

Float也离开了下一个!!

<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;
    float:left;
}

Answer 6

在第二个div上添加另一个“float：left”值。

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

}

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

}

DEMO

Answer 7

同时将#two Div设置为float:left。

浮动div覆盖下一个div

7 个答案: