Question

一点背景：我正在制作一个标题，它横跨我的网页顶部。我希望当前用户名，注销按钮等在标题中向右浮动，我希望徽标和一些导航项位于左侧。当浏览器窗口缩小使左项和右项碰撞时，我不希望它们换行。我将header-container div设置为overflow：auto，所以我希望它能够开始滚动。

问题：即使我有一个div float：left和一个div float：右边都有display：inline-block，而父有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链接

Answer 1

添加左，右，上，下边距的示例;多个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>

从此讨论中修改的代码和另一个。

Answer 2

display：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;
}

CSS div左右浮动nowrap

2 个答案: