爲什麼顯示內聯塊不工作？

我有一個包含寬度evenly-

 .box1 
     { 
     width:50%; 
     height:200px; 
     } 

     .box2 
     { 
     width:50%; 
     height:200px; 
     }

下面這兩個箱子是這些boxes-

.container 
{ 
    border:1px solid green; 
    display:inline-block; 
    width:100%; 
    }

我想知道當容器div爲100％，其遏制寬度div容器divs等分爲寬度的50％。然後，將它們在線對齊後爲什麼它不在線？但是，將寬度減小到小於50％會使它們對齊。

雖然如果我使用float一致把原因歸結出其inline-

.container 
{ 
    border:1px solid green; 
    display:inline-block; 
    width:100%; 
    } 
.box1 
{ 
    float:right; 
    width:50%; 
     height:200px; 
    background:red; 
} 
.box2 
{ 
    float:right; 
    background:red; 

    width:50%; 
    height:200px; 

}

我想知道爲什麼它沒有顯示其寬度內聯是否平分？

來源

2013-07-08 Manoj

他們是inline-block的，但通常使用50％，當你不爲像素四捨五入和利潤率/填充計數。所以，實際上，50％會是50％+ 10px，這會導致下一個div不適合在同一行中，從而破壞該行並將其放在第一個div的下面，而不是放在第一個div的旁邊。如果您使用Chrome的檢查器或Firefox的Firebug檢查元素，您會注意到它並不佔據整個寬度，僅佔半數以上。

來源

2013-07-08 09:31:17 casraf

好的，這意味着它會自動添加空間來設置它們對齊嗎？這就是爲什麼它顯示在下一行。有沒有辦法保持50％的寬度並將它們對齊？ – Manoj

這意味着你的寬度不是唯一的計算。還有邊距和填充，這可能會使div寬於50％，導致下一個div下降到下一行。 – casraf

好吧，它對我有幫助。 – Manoj

您的邊框計算爲元素大小的一部分，它是一個加法，並不是寬度爲100％的包含。這將導致內聯元素移動到下一行。

盒模型增加了它的所有部件連接在一起，以獲得最終的大小，包括空白和邊距： http://www.w3.org/TR/CSS2/box.html

一個正常的小問題，就是當您指定邊框1px的你實際上是將兩個像素到最後計算大小，一個在左邊，一個在右邊。

來源

2013-07-08 09:32:35 Nickel

真的很有幫助的鏈接，謝謝 – Manoj

沒問題Manoz。如果這已經充分回答了您的問題，請將其標記爲已接受。 – Nickel

首先，我會設置填充：0;和餘量：0;包含任何瀏覽器分配的填充（用戶代理樣式表 - 可以使用chrome中的inspect元素或Mozilla等的螢火蟲等）看到，並且如果要將它們浮起，然後將它們浮起並稍後清除浮動。所以你有這樣的事情：

.container{ 
    border: 1px solid green; 
    width:100%; 
} 

.box1{ 
    margin: 0; 
    padding: 0; 
    float:left; 
    width:50%; 
    height:200px; 
    background:red; 
} 

.box2{ 
    margin: 0; 
    padding: 0; 
    float:left; 
    background:red; 
    width:50%; 
    height:200px; 
}

應該做的伎倆。

來源

2013-07-08 09:36:34

爲什麼顯示內聯塊不工作？

回答

相關問題