防止浮動div的包裝

<style> 
.header { 
    float:left; 
    width:50%; 
    border:1px solid black; 
} 
</style> 

<div style="width:100%;"> 
    <div class="header">Hello</div> 
    <div class="header">World</div> 
</div>

我想要兩個內部div出現在彼此旁邊完全適合父母。這發生在沒有設置邊框的情況下，但是當我設置了邊框時，第二個div將包裝並顯示在下方。我如何避免這種情況？防止浮動div的包裝

來源

2010-10-21 akula1001

發生這種情況的原因是因爲50％x 2已經是100％。 2 px邊框使寬度達到100％+ 4 px。要撤消此操作，請在兩側使用1px的負邊距。

演示：http://jsfiddle.net/rfSMX/1/

你可能會碰到100% combined width issue in IE。

來源

2010-10-21 12:15:07

+1這是快速和正確的:) – Sarfraz 2010-10-21 12:17:24

和jsfiddle很酷。 – akula1001 2010-10-21 12:32:04

本質上，發生的事情是您的div的大小爲50％+ 2像素（每個邊框一個）。由於（50％+ 2像素）* 2比100％的容器寬，因此會迫使浮動包裹。

在您的.header div的左右兩側應用-1像素邊距應該可以做到。

來源

2010-10-21 12:17:28

在需要叫做header-inner的邊框的div中添加一個額外的div。

<style> 
.header { 
    float:left; 
    width:50%; 
} 
.header-inner { 
    padding: 10px; 
    border: 1px solid #ccc; 
} 
</style> 

<div style="width:100%;"> 

    <div class="header"><div class="header-inner"> 
     Hello 
    </div></div> 

    <div class="header"><div class="header-inner"> 
     World 
    </div></div> 

</div>

來源

2010-10-21 12:20:45 woodscreative

這可能工作：

，因爲你不需要飄起了第二個div應該填補是第一個div之後留下任何空間。這允許你添加一個邊框，並且讓它們並排齊平

來源

2010-10-21 12:32:19 Alex

防止浮動div的包裝

回答

相關問題