CSS邊界屬性打破內嵌塊

我試圖把兩個DIV並排，50％都與邊界。我創建了一個Div容器和兩個內部容器，它一直運行，直到我放入border屬性。CSS邊界屬性打破內嵌塊

在邊境存在，的DIV呈現在兩行：

body { 
 
    background-color:cadetblue; 
 
} 
 

 
#container { 
 
    width: 800px; 
 
} 
 

 
#divL, #divR { 
 
    width: 50%; 
 
    display: inline-block; 
 
    border: 2px solid black; 
 
}

<body> 
 
    <div id="container"> 
 
     <div id="divL">L</div><div id="divR">R</div> 
 
    </div> 
 
</body>

但是當我刪除邊框的規則，它按預期工作。

body { 
 
    background-color:cadetblue; 
 
} 
 

 
#container { 
 
    width: 800px; 
 
} 
 

 
#divL, #divR { 
 
    width: 50%; 
 
    display: inline-block; 
 
    
 
}

<body> 
 
    <div id="container"> 
 
     <div id="divL">L</div><div id="divR">R</div> 
 
    </div>

我怎樣才能把一個邊界divL和divR？

來源

2016-02-26 distante

@Nenad Vracar的回答是正確的。但是，我會將'box-sizing'添加到所有元素，而不僅僅是這個實例。 '* {box-sizing：border-box; }'首先需要'box-sizing'的原因是b/c瀏覽器在使用其他元素的寬度時不計算'padding，margin和border'的寬度。看到這裏：https://css-tricks.com/box-sizing/ –

添加box-sizing: border-box因此邊框寬度將包含在div的50%寬度中。

body { 
 
    background-color:cadetblue; 
 
} 
 

 
#container { 
 
    width: 800px; 
 
} 
 

 
#divL, #divR { 
 
    width: 50%; 
 
    display: inline-block; 
 
    border: 2px solid black; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <div id="divL">L</div><div id="divR">R</div> 
 
</div>

來源

2016-02-26 12:00:59

這是正確的，打算髮布它） – markoffden

謝謝@Nenad！我不知道經常的行爲或邊界。 – distante

不客氣。注意：這也適用於元素的填充。 –

您使用寬度的50％，並且還使用邊界2px的寬度

body { 
 
    background-color:cadetblue; 
 
} 
 

 
#container { 
 
    width: 800px; 
 
} 
 

 
#divL, #divR { 
 
    width: 49%; 
 
    display: inline-block; 
 
    border: 2px solid black; 
 
}

<body> 
 
    <div id="container"> 
 
     <div id="divL">L</div><div id="divR">R</div> 
 
    </div> 
 
</body>

來源

2016-02-26 12:04:10

這樣我就必須小心邊框的寬度也不要？ 2px將工作，6px不會。 – distante

Govind Bhai，這是不正確的答案，如果要求是50％，那麼爲什麼你將寬度降低到48％。 –

兩者都是div的有50％，而你給予額外的邊境。所以

50% + 50% + 2px (border) = 100% (container) + 2px (extra)

但我們有100％的容器大小，所以需要調整兩個div的百分之百。

您可以給div的49％寬度。

#divL, #divR { 
    width: 49%; 
    display: inline-block; 
    border: 2px solid black; 
}

我希望它也可以。

來源

2016-02-26 12:13:14

如果1px不等於1％會怎樣？ –

那麼你需要減小Div的寬度來調整1px的邊框寬度，如果出現與屏幕尺寸相關的問題，則使用媒體CSS。 –

CSS邊界屬性打破內嵌塊

回答

相關問題