1

使用“浮动：左；” 将 div 并排放置会导致问题。我似乎无法在浮动 div 的正下方放置另一个 div。

见 JSFiddle --> http://jsfiddle.net/8RgkE/

您可以看到绿色框位于红色和蓝色框下方，但我需要绿色框向下移动到两个框下方。我似乎不能这样做并保留“float：left”框。

这是踢球者：红色和蓝色框的高度可能会发生变化，因此您不能将小框封装到一个 div 中并调整该 div 的大小。

HTML

<div id='red' class='box'></div>
<div id='blue' class='box'></div>
<div id='green'></div>

CSS：

.box {
  width:200px;
  height:200px;
  float:left;
}

#red {background-color:red;}

#blue {background-color:blue;}

#green{
  width:400px;
  height:400px;
  background-color:green;
  border:4px solid black;
}
4

4 回答 4

2

你需要清除浮动。

#green{
    clear: both;
}

http://jsfiddle.net/8RgkE/2/

于 2013-10-28T21:21:35.280 回答
2

你可以clear: left;使用#green

http://jsfiddle.net/8RgkE/1/

于 2013-10-28T21:21:47.873 回答
1

您需要清除 div 以开始新的一行。

演示http://jsfiddle.net/8RgkE/3/

我通常使用div这样的空地

<div style="clear: both"></div>

另一种解决方案是替换float: left为display: inline-block

演示http://jsfiddle.net/8RgkE/4/

于 2013-10-28T21:23:31.963 回答
0

clear:both;最安全和最可扩展的方法是在绿色 div 之前添加一个新元素。

HTML

<div id='red' class='box'></div>
<div id='blue' class='box'></div>
<div id='clear'></div>
<div id='green'></div>

CSS

#clear{
  clear:both;
}
于 2013-10-28T21:23:49.747 回答