一点背景知识:我正在研究一个标题,它在我的网页顶部横跨整个页面。我希望当前用户名、注销按钮等在标题中浮动到右侧,并且我希望徽标和一些导航项位于左侧。当浏览器窗口缩小以致左侧项目和右侧项目发生碰撞时,我不希望它们换行。我将 header-container div 设置为溢出:自动,所以我希望它开始滚动。
问题:即使我有一个 div float:left 和一个 div float:right 都带有 display:inline-block,而父级带有 white-space:no wrap - wrap!!! 偶然我发现我可以通过将另一个 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 链接