4

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

检查这个 jsfiddle 看清楚：http: //jsfiddle.net/4KUTy/5/

具有的settings divs属性，float:right;但最后一个位于错误的位置，如果 I 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;
}
4

6 回答 6

3

浮动 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）。

于 2013-02-18T16:07:26.473 回答
2

这里有两件事是错误的：

  • 包装器 div.content 设置为 display: inline。
  • 包装器 div.content 无法正确缩放，因为所有子元素都超出了流程。

为了使设置 div 行为正确，请使用：

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

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

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

于 2013-02-18T16:07:09.740 回答
0

只需在最后一个 div 之前添加一个占位符 div

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

并添加 css-rule

.placeholder{
visibility: hidden;
}

有一个jsfiddle要检查：这里

于 2013-02-18T15:59:40.667 回答
0

制作 all 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

于 2013-02-18T16:00:34.310 回答
0

您的 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/

于 2013-02-18T16:03:18.373 回答
0

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

主要变化

  • 我将很多float属性更改为display:inline-block. 这样做的原因是所有元素都正确定位自己。
  • 我取消了 的宽度container，所以现在它的响应速度应该会稍微快一些
  • 我删除了settings_div类并将 CSS 更改为#content div以保存代码
  • 添加display:inline-block到ulCSS 中并从内联样式中删除
  • 一个相当大的问题是你有一个内容集的属性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以便它在需要时与菜单内联显示，但当它太满时会下拉
于 2013-02-18T16:38:00.127 回答