CSS div左右浮動nowrap

Question

一點背景：我正在制作一個標題，它橫跨我的網頁頂部。 我希望當前用戶名，注銷按鈕等在標題中向右浮動，我希望徽標和一些導航項位於左側。 當瀏覽器窗口縮小使左項和右項碰撞時，我不希望它們換行。 我將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鏈接

Answer 1

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

代碼從此討論中修改而另一個。

Answer 2

display：內聯塊效果選擇器的子節點。 這是更新版本，其中從子元素中刪除了內聯塊。

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 個解決方案

解決方案1
9 已采納 2014-02-02 05:49:28

解決方案2
4 2013-05-19 19:37:00

CSS div左右浮動nowrap

問題描述

2 個解決方案

解決方案1 9 已采納 2014-02-02 05:49:28

解決方案2 4 2013-05-19 19:37:00

解決方案1
9 已采納 2014-02-02 05:49:28

解決方案2
4 2013-05-19 19:37:00