在另一个DIV中浮动DIV

问题描述：

对于我的网页，我有一个容器DIV，其中包含菜单DIV和内容DIV。我在内容DIV中安排了几个“设置”DIV，我想让它们在内容DIV中向左浮动，但是下面的DIV在菜单DIV下结束。在另一个DIV中浮动DIV

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

的settingsdivs有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; 
}

答

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

你是最简单的答案，它的工作。非常感谢，我很感激。 – Peter 2013-02-18 22:46:43

它确实有效，但我无法理解溢出和显示：块与它有什么关系。任何链接，请？ – opensas 2014-03-18 05:16:11

@opensas添加了几个链接来帮助您 – cernunnos 2014-03-18 18:03:33

答

的最后一个div

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

前只需添加一个占位符的div并添加CSS规则

.placeholder{ 
visibility: hidden; 
}

拥有的jsfiddle检查：here

非常接近但没有雪茄。感谢发布。 – Peter 2013-02-18 22:47:29

答

使所有settings_divfloat: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

+1感谢您的回复 - 正常工作，但@cermunnos回答更简洁（无需添加另一个div），因此选择了该答案。 – Peter 2013-02-18 22:49:17

答

只有小幅改动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/

感谢发布 - 您的解决方案似乎工作正常，但我去了一个更简单的答案，没有涉及利润。再次感谢。 – Peter 2013-02-18 22:53:36

答

两件事情在这里错了：

的包装div.content设置为显示：内联。
包装div.content不能正确缩放，因为所有子元素都不在流中。

为了使设置的div守分使用：

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

，然后左浮动所有设置div的。

见更新小提琴： http://jsfiddle.net/4KUTy/7/

+1感谢发布 - 您的解决方案正是我所需要的。 @cermunnos第一次虽然...... =） – Peter 2013-02-18 22:51:41

我查过了，我用几秒钟就打败了他。但没关系，很高兴你能够正常工作。 xD – MarkSmits 2013-02-19 08:31:38

答

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

重大变化

我改变了很多float属性来display:inline-block。这是因为所有元素都能正确定位。
我脱掉了宽度为container，所以现在应该是
我删除了settings_div类轻微反应更灵敏，在CSS改变CSS来#content div保存代码
新增display:inline-block到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确切的宽度以便它在需要时与菜单一起显示，但当它太满时会下降

非常感谢您的回复。虽然Divs并不是我想要的东西。 =） – Peter 2013-02-18 22:45:41

你应该投票它;-) – 2013-02-18 22:48:17

花花公子不是在正确的地方 - 当屏幕宽度减少，他们浮动菜单下，我不想要的。不过，我可能没有把这100％清楚，所以+1已经完成了。 =） – Peter 2013-02-18 23:00:08

在另一个DIV中浮动DIV

相关推荐