Html 浮动div覆盖下一个div

我想在一行上定位一个

，然后再定位另一个

我将第一个

设置为向左浮动，然后放入下一个

然而，第一部分涉及第二部分。它不是将第二个放在第一个之后（正如我所预料的那样），而是从同一个地方开始

下面是代码（在JSFiddle:）

#容器{
宽度：300px；
高度：500px；
}
#一个{
宽度：100px；
高度：500px；
浮动：左；
背景颜色：绿色；
}
#两个{
宽度：200px；
高度：500px；
背景颜色：蓝色；
}

浮动第二个div，或将

边距放在左侧

等于第一个div的宽度：

:

@plantheidea建议使用

display:inline block

是正确的。不过，这个问题确实有一个目的：当您希望第二个div占用剩余空间时（并且不想使用

display:table

例如）

:

---

浮动第二个div，或将

边距置于左

等于第一个div的宽度：

:

@plantheidea建议使用

display:inline block

是正确的。不过，这个问题确实有一个目的：当您希望第二个div占用剩余空间时（并且不想使用

display:table

例如）

:

---

您需要放弃浮动，并发现

display:inline块我的朋友

您的HTML：

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


我之所以消除两个
div
s之间的空格，是因为如果有空格，
inline block
会在它们之间留出4px的边距。旧的IE部件适用于IE7及以下版本。
您需要放弃浮动，并发现
display:inline块我的朋友

您的HTML：

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


我之所以消除两个
div
s之间的空格，是因为如果有空格，
inline block
会在它们之间留出4px的边距。旧的IE部件适用于IE7及以下版本。
您也可以通过使第二个div浮动来解决此问题：

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

您也可以通过使第二个div浮动来解决此问题：

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

在两个
div
s上都需要
float:left

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

在两个
div
s上都需要
float:left

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

浮子也会离开下一个

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


#容器{
宽度：300px；
高度：500px；
}
#一个{
宽度：100px；
高度：500px；
浮动：左；
背景颜色：绿色；
}
#两个{
宽度：200px；
高度：500px；
背景颜色：蓝色；
浮动：左；
}
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;
}


#容器{
宽度：300px；
高度：500px；
}
#一个{
宽度：100px；
高度：500px；
浮动：左；
背景颜色：绿色；
}
#两个{
宽度：200px；
高度：500px；
背景颜色：蓝色；
浮动：左；
}
只需在第二个div上添加另一个“float:left”值

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

}

}

只需在第二个div上添加另一个“float:left”值

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

}

}

将
#two
Div也设置为
float:left
。将
#two
Div也设置为
float:left
。
同意，这是可能使用float的一种情况（我仍然会为
显示：表格单元格；
，但如果出于某种原因需要支持IE7），但是，在这种情况下，宽度是预设的。如果你阅读我的答案，通过删除
div
s@plantheidea之间的空格，@Zafar将被删除。即使在我的工作中，我们也放弃了IE7支持。我为此奋斗了很长时间！我尽量避免在任何地方引用表，除非我真的想显示表格数据。这可能是“让我们做一切表格”时代的偏见。
display:table
与HTML表格不一样=>Hah，不，我100%知道，因此“这可能只是偏见”同意，这可能是一种可能使用浮动的情况（我仍然支持
display:table cell；
，但如果出于某种原因需要支持IE7），但是在这种情况下，宽度是预设的。如果你阅读我的答案，通过删除
div
s@plantheidea之间的空格，@Zafar将被删除。即使在我的工作中，我们也放弃了IE7支持。我为此奋斗了很长时间！我尽量避免在任何地方引用表，除非我真的想显示表格数据。这可能是“让我们做一切表格”时代的偏见。
display:table与HTML表格不一样=>Hah，不，我100%知道，因此“这可能只是偏见”
display:inline block
在div之间添加了一些不必要的空格。@Zafar-如果你读了我的答案，你会看到我把它调出，并通过删除
div
s之间的空格来消除它。
display:inline块
在div之间添加了一些不必要的空格。@Zafar-如果你读了我的答案，你会看到我把它调用了，并通过删除
div
s之间的空格来消除它。
#two {
width: 200px;
height: 500px;
background-color: blue;
float:left;
margin-left:20px