将包含三个 div 的 div 连续浮动在内容 div 上

在一个

容器中有三个div，我想漂浮在一个大的div上。我该怎么做？到目前为止，我有这个...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
<!--
div.HeaderContainer { float:left; }
div.One {  float:left; border: 1px solid; }
div.Two {  float:left;} 
div.Three {  float:left; border: 1px solid; } 
div.Content{ float:none; }
-->
</style>
</head>
<body>
<div class = "HeaderContainer">
    <div class="One">one</div>
    <div class="Two" id="tdAmplicon">two</div>
    <div class="Three">three</div>
</div>
<div class="Content" >content</div>
</body>
</html>

但是，这只会将内容div 放在 HeaderContainerdiv 的左右边。如何使内容div 浮动在 HeaderContainerdiv 下方？谢谢。

div.Content { clear: both; }

将内容div 放在HeaderContainer下方

http://jsfiddle.net/ZDE6C/

或者

，您可以将div.HeaderContainer上的float:left;替换为overflow:hidden;：

div.HeaderContainer { overflow: hidden; }

http://jsfiddle.net/ZDE6C/1/

相关内容

最新更新

热门标签：