CSS div左右浮动nowrap
kly*_*aek 9 html css html5 css-float
一点背景:我正在制作一个标题,它横跨我的网页顶部.我希望当前用户名,注销按钮等在标题中向右浮动,我希望徽标和一些导航项位于左侧.当浏览器窗口缩小使左项和右项碰撞时,我不希望它们换行.我将header-container div设置为overflow:auto,所以我希望它能够开始滚动.
问题:即使我有一个div float:left和一个div float:右边都有display:inline-block,而parent有white-space:没有换行 - 换行!!! 我偶然发现我可以通过将display:inline-block包含在另一个div中来实现它.为什么是这样？？？
下面是我的代码和一个工作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链接
添加了左,右,上,下边距的示例; 多个div; 调整主框架高度; 为左边最左边的浮动div设置左边距; 和最右边的浮动Div的右边距:
结果:
样式和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>
代码从此讨论中修改而另一个.