Question

对于我的网页，我有一个容器DIV，在菜单DIV和内容DIV中。我在内容DIV中安排了几个“设置”DIV，我想让它们在内容DIV中向左浮动但是较低的DIV最终会在菜单DIV下面。

检查此jsfiddle以清楚地看到：http://jsfiddle.net/4KUTy/5/

settings divs的属性为float:right;，但最后一个位于错误的位置，如果我float:left;，则会进入菜单。< / p>

请帮忙。

这里的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;
}

Answer 1

这里有两件事是错的：

包装器div.content设置为display：inline。
包装器div.content无法正确缩放，因为所有子元素都不在流中。

为了使设置div正确使用：

 .content { display: block; overflow: hidden; }

然后向左浮动所有设置div。

查看更新的小提琴： http://jsfiddle.net/4KUTy/7/

Answer 2

浮动div的容器应该有：

overflow: hidden; /* Makes the container actually "contain" the floated divs */
display: block;

浮动的div应该是

float:left

小提琴：http://jsfiddle.net/4KUTy/5/

我发现了一篇很好的帖子，试图解释为什么溢出：隐藏的工作方式如下：http://colinaarts.com/articles/the-magic-of-overflow-hidden/

如果链接死亡：将溢出设置为除可见之外的任何内容将导致它建立新的块格式化上下文（http://www.w3.org/TR/CSS21/visuren.html#block-formatting）。

Answer 3

只需在最后一个div

之前添加一个占位符div

<div class="settins_div placeholder">placeholder</div>

并添加css-rule

.placeholder{
visibility: hidden;
}

有一个jsfiddle来检查：here

Answer 4

制作所有settings_div float:left;，但使用另一个正确浮动并且足够宽的容器：

<div id="setting-container" style="float:right;width:800px;">
    <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>

jsfiddle

Answer 5

您的css规则只有很小的变化：

您应该在菜单上添加固定宽度。

.menu { 
    padding:5px;
    background-color:#33CCCC;
    float:left;
    text-align:left;
    width:150px;
}

你的容器需要被右边的那个值+边距“移动”。因此，为其添加margin-left：

#content {
    width:600;
    min-height:620px;
    vertical-align:top;
    margin-left: 160px;
}

将#container设为overflow: hidden。

现在每个设置div都应该向左浮动。

jsfiddle的更新版本： http://jsfiddle.net/4KUTy/8/

Answer 6

以下是我的结果http://jsfiddle.net/burn123/4KUTy/10/

重大变化

我将很多float属性更改为display:inline-block。这样做的原因是所有元素都能正确定位。
我取消了container的宽度，所以现在应该稍微提高响应度
我删除了settings_div类并将CSS更改为#content div以保存代码
将display:inline-block添加到CSS中的ul并将其从内联样式中删除
一个相当大的问题是当内容设置为width:600时，您需要width:600px;。我最终删除了这种风格。
因为您将#container设置为relative的定位，然后我将margin-top:-10;更改为top:-10px;

小变化

简化了许多属性，例如margin和border
从容器中删除了width，overflow和min-height，因为它们没有用处

更新 - http://jsfiddle.net/burn123/4KUTy/12/

为每个元素添加了border-box，以便它显示您指定的确切宽度
为container添加了一个流体宽度，以便在需要时显示内嵌菜单，但是当它太满时会显示下拉

在另一个DIV中浮动DIV

6 个答案: