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左右浮動

回答

相關問題