CSS div左右浮动

有点背景：我正在打造一个页眉，它横跨整个网页。我希望将当前的用户名，注销按钮等悬浮在标题右侧，并且我希望徽标和一些navitems位于左侧。当浏览器窗口缩小时，左边的项目和右边的项目发生冲突，我不希望它们换行。我将header-container div设置为溢出：auto，所以我希望它开始滚动。CSS div左右浮动

问题：即使当我有一个div float：left和div float：right同时使用display：inline-block和父空白：没有换行 - 换行！偶然，我发现我可以通过将另一个div与display：inline-block封装在一起工作。为什么是这样？？？

下面是我的代码和一个工作jsfiddle来显示工作设置和安装程序包装。我不明白为什么我需要额外的div。 http://jsfiddle.net/klyngbaek/tNHLL/9/

当我缩小窗口，我不希望第二个蓝色的矩形下降到一个新行

HTML：

<h2>With extra inline-block dive. The blue rectangles do not wrap.</h2> 
<div class="wrapper nowrap"> 
    <div class="second-wrapper"> 
     <div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div> 
     <div class="floating float-right">[username] | logout</div> 
    </div> 
</div> 
<h2>Without extra inline-block dive. The blue rectangles do wrap.</h2> 
<div class="wrapper nowrap"> 
    <div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div> 
    <div class="floating float-right">[username] | logout</div> 
    <div class="clearfix"></div> 
</div>

CSS：

.wrapper { 
    border:#333; 
    margin-bottom:; 
} 
.second-wrapper { 
    border:; 
    display:inline-block; 
    min-width: 100%; 
} 
.nowrap { 
    white-space: nowrap; 
} 
.clearfix { 
    clear: both; 
} 
.floating { 
    background: lightblue; 
    border:; 
    height:; 
    padding:} 
.float-left { 
    float: left; 
} 
.float-right { 
    float: right 
}

或者也许有更好的方法来完成我想要的。

在此先感谢！

编辑：更新的jsfiddle链接

来源

2013-05-19 klyngbaek

我想你忘了小提琴中的clearfix div，我认为second-wrapper拉伸以包含两个浮动divs的原因是因为它的display属性设置为inline-block。 –

与左，右，上，下边界，将实施例;多个div;调整主机架高度;为左边最左边的浮动div设置左边距;而最右边的浮动DIV的右页边距：

结果：

enter image description here

造型和HTML在一个文件中：

<html> 
<body> 
<style> 

.row { 
    float:left; 
    border: 3px solid blue; 
    width: 96%; 
    margin-left: 2%; 
    margin-right: 2%; 
    height: 115px; 
    overflow: auto; 
    position: static; 
} 

.floatLeftDiv { 
    display: inline-block; 
    border: 3px solid red; 
    width: 200px; 
    height: 100px; 
    margin-top: 3px; 
} 

.right { 
    float: right; 
    border: 3px solid red; 
    width: 200px; 
    height: 100px; 
    margin-top: 3px; 
    margin-right: 1%; 
} 

</style> 

<div class="row"> 
    <div class="floatLeftDiv" style="margin-left: 1%;">Inline Item A:</div> 
    <div class="floatLeftDiv">Inline Item B:</div> 
    <div class="floatLeftDiv">Inline Item C:</div> 
    <div class="right">Inline Item D:</div> 
</div> 


</body> 
</html>

代码从这个讨论和另外一个修改。

来源

2014-02-02 05:49:28

显示：inline-block的效果选择的孩子。这里是从子元素中删除内联块的更新版本。

http://jsfiddle.net/ccsuP/

我得看你想布局页面的标记。我想知道如果使用定位可能是要走的路。

这里检查这个，让我知道，如果有帮助： http://jsfiddle.net/taUgM/

* { Box-sizing: Border-box } 

.wrapper { 
    border: 1px dashed #333; 
    margin-bottom: 10px; 
    overflow: auto; 
width: 100%; 
    position:absolute; 
} 
.box{ 
    width:50px; 
    height:50px; 
    border:1px solid yellow; 
    display:block; 
    position: relative; 
} 

.title-etc{ 
    top:0; 
    left:0 
    float:left;   
    background:blue; 
} 
.login-box{ 
    top:0; 
    right:0; 
    float:right; 
     background:red; 
}

来源

2013-05-19 19:37:00 BingeBoy

感谢您的评论。也许我对我的问题不是很清楚。我不关心蓝色矩形包装的内容。我担心浏览器窗口变得太小时会出现2个蓝色矩形。当窗口太小时，您在jsfiddle中添加的示例将第二个矩形放到新行。这就是我想要避免的。谢谢！ – klyngbaek

检查我的第二个链接，显示了一个解决方案：http://jsfiddle.net/taUgM/ – BingeBoy

谢谢。看起来你在这里丢失了一个分号'left：0 float：left;'在课程名称等。如果我添加分号，它会再次打包。但是，如果我拿走浮球：它似乎工作！ http://jsfiddle.net/kristianlyngbaek/taUgM/1/ – klyngbaek

CSS div左右浮动

回答

相关问题