对于我的网页，我有一个容器 DIV，其中有一个菜单 DIV 和一个内容 DIV。我在内容 DIV 中安排了几个“设置”DIV，我希望它们在内容 DIV 中向左浮动，但较低的 DIV 最终位于菜单 DIV 下。
检查此 jsfiddle 以清楚地看到:http://jsfiddle.net/4KUTy/5/
settings divs 具有 float:right; 的属性，但是最后一个放在错误的位置，如果我 float:left;，然后它进入菜单下。
请帮忙。
此处为 jsfiddle html 代码:
<html>
<head/>
<body>
<div id="container">
<div class="menu">
<ul>
<li>menu option 1</li>
<li>menu option 2</li>
<li>menu option 3</li>
<li>menu option A</li>
<li>menu option B</li>
<li>menu option C</li>
</ul>
</div>
<div id="content">
<div class="settings_div">Project Settings<br/>
<ul style="display:inline-block">
<li>language</li>
<li>currency</li>
<li>mark up</li>
</ul>
</div>
<div class="settings_div">Your Company Settings<br/>
<ul style="display:inline-block">
<li>company details</li>
<li>bank details</li>
<li>contact details</li>
</ul>
</div>
<div class="settings_div">Output Settings <br/>
<ul style="display:inline-block">
<li>company logo</li>
<li>date format</li>
<li>fonts etc</li>
</ul>
</div>
<div class="settings_div">Graphical Settings<br/>
<ul style="display:inline-block">
<li>colors</li>
<li>text size</li>
<li>more</li>
</ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
<ul style="display:inline-block">
<li>But NOT under the menu</li>
<li>float:left puts it under the menu</li>
<li>should be under graphical settings</li>
</ul>
</div>
</div>
</div>
</body>
</html>
jsfiddle CSS 在这里:
.settings_div {
text-align:left;
display:inline;
width:300px;
height:80px;
padding:20px;
padding-top:10px;
margin:20px;
margin-top:0px;
margin-bottom:20px;
border-color:#33CCCC;
border-style:solid;
border-width:thick;
float:right;
}
#content {
width:600;
min-height:620px;
vertical-align:top;
display: inline;
}
.menu {
padding:5px;
background-color:#33CCCC;
float:left;
text-align:left;
width:auto;
}
#container {
margin-bottom:10px;
background-color:#eee;
width:950px;
min-height:620px;
border-radius:0px;
position:relative;
margin-top:-10;
margin-right:auto;
margin-left:auto;
overflow: visible;
}
最佳答案
float div 的容器应该有:
overflow: hidden; /* Makes the container actually "contain" the floated divs */
display: block;
float 的div应该是
float:left
fiddle :http://jsfiddle.net/4KUTy/5/
我找到了一篇很好的帖子，它试图解释为什么溢出:隐藏会这样工作:http://colinaarts.com/articles/the-magic-of-overflow-hidden/
如果链接失效:将溢出设置为可见以外的任何内容将导致它建立新的 block 格式上下文 (http://www.w3.org/TR/CSS21/visuren.html#block-formatting)。
关于html - 在另一个 DIV 中 float 一个 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14940196/