意外的高度

我已經在html/css中創建了標題。菜單1中出現意外的高度。如何擺脫這個高度。明確：我也加了。任何人都請建議我在哪裏做錯了。意外的高度

HTML：

<div class="logo"> 
    <img src="http://dummyimage.com/140x60/000/fff" /> 
</div> 
<div class="rightContent"> 
    <div class="menuOne"> 
     <div class="fLeft">LeftContent</div> 
     <div class="fRight">RightContent</div> 
     <div class="cBoth"></div> 
    </div> 
    <div class="menuTwo">Second menu will come here</div> 
</div>

和CSS：

.fLeft { 
    float:left 
} 
.fRight { 
    float:right 
} 
.cBoth { 
    clear:both 
} 
.logo { 
    float:left; 
    border:1px solid red 
} 
.rightContent { 
    margin-left:150px; 
    border:1px solid blue 
} 
.menuOne { 
    background-color:#ccc 
} 
.menuTwo { 
    background-color:#333; 
    color:#fff 
}

見琴：http://jsfiddle.net/fLZHq

感謝

來源

2013-12-18 Pavan Kumar

你能提供你想要的方式和意外創建問題的截圖嗎？ – Nitesh

我沒有在menuOne中給出任何高度，填充和邊距。 menuTwo應該固定menuOne.Extra灰色的底部意味着有一些高度到來，高度看起來等於圖像高度。 –

將clear:both更改爲clear:right修復了它。

.cBoth { 
    clear:right; 
}

演示第一種方法：http://jsfiddle.net/fLZHq/3/

clear:both推動下的所有先前的浮動元素的元素（這包括你的情況下標誌的div）。而clear:right只會將它推到您想要的右浮動元素下方。

第二種方法是保持clear:both，但浮動的rightContent並刪除左邊距，這樣的：

.rightContent { 
    float:left; 
    border:1px solid blue 
}

演示的第二種方法：http://jsfiddle.net/fLZHq/7/

來源

2013-12-18 06:33:56

我爲什麼要說清楚：對。清楚：兩者都清除左側和右側。如何清楚：在這裏正確的作品？ –

'明確：兩者'都在'logo'下面推'menu2'。記住'logo'也是左邊的。而'clear：right'''menu1'下面的menu2'' –

謝謝。我現在知道了。 –

試試這個

.rightContent { 
    margin-left:150px; 
    float: left; 
    border:1px solid blue 
}

來源

2013-12-18 06:32:31

所有有關的佈局與CSS問題該頁面可以通過 3d查看可在Firefox中找到。

您已經使用float left作爲圖像，並且沒有爲rightContent div使用float。所以，圖像重疊你的'rightContent'div。這就是你需要給「rightContent」div留下餘量的原因。

所以，一旦你給float：留給'rightContent'div，意想不到的問題就解決了。

來源

2013-12-18 07:10:27 ethan

回答

相關問題