CSS邊界問題

我正在試圖做一個有4個小方塊的廣場，而我一直在用我想要做的一種方式遇到麻煩。所以這是代碼：CSS邊界問題

#grandbox { 
 
    position: absolute; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
</div>

我想使邊框的CSS樣式：

border: 2px solid black

但如果我這樣做的箱子剛打出來的更大的盒子並垂直顯示。

我很喜歡這個，因爲我現在開始我的carreer，但我不明白爲什麼它不起作用。

PS：對不起，如果英語不好，不是我的第一語言。

來源

2016-08-05 Yacomini

通常，邊框寬度被添加到給定的寬度。使用box-sizing: border-box;規則，您可以將邊框包含在寬度中，以便您不再有任何中斷。看到這個片斷：

#grandbox { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
    box-sizing: border-box; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
</div>

約盒大小的詳細信息，請參閱https://developer.mozilla.org/de/docs/Web/CSS/box-sizing。

來源

2016-08-05 13:16:39 andreas

所以，我沒有告訴瀏覽器如何大小呢？謝謝你解釋這個！ – Yacomini

你沒有告訴瀏覽器在你的寬度指令中包含邊框。這就是爲什麼'.smallbox'元素因其邊框寬度而大於100px。 – andreas

瀏覽器使用_by default_標準盒子模型。使用'box-sizing：border-box'，你告訴它切換到相當於IE6盒子模型，這是被高度鄙視和實際上更好的咳嗽方式。非常好的總結在https://css-tricks.com/box-sizing/（你不需要盒子大小僞IMHO但除此之外，這個通用盒...是天才。你可以混合一個使用另一個盒子模型的插件，無論你使用的是什麼盒子模型） – FelipeAls

外箱應放置在relative和四個內箱absolute。那麼你只需要使用leftrighttopbottom屬性來定位它們。

#grandbox { 
 
    position: relative; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
} 
 
div.sb1 { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
div.sb2 { 
 
    top: 0; 
 
    right: 0; 
 
} 
 
div.sb3 { 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
div.sb4 { 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox sb1"> 
 

 
    </div> 
 
    <div class="smallbox sb2"> 
 

 
    </div> 
 
    <div class="smallbox sb3"> 
 

 
    </div> 
 
    <div class="smallbox sb4"> 
 

 
    </div> 
 
</div>

這裏有一個jsbin版本。

來源

2016-08-05 13:13:48

編輯：我的回答是更多的黑客解決方案。 上面的接受的答案合併框自動包含邊框的寬度是一個更好的答案。

在你原來的高度和寬度（204）的計算中，我認爲你沒有考慮到每個正方形的兩邊都增加了4個像素。

將寬度和高度調整爲208像素即可解決您的問題。

#grandbox 
 
    { 
 
     position: absolute; 
 
     width:208px; 
 
     height:208px; 
 
     border: 2px solid black; 
 
     left:40%; 
 
     top: 8%; 
 
    } 
 

 
div.smallbox 
 
    { 
 
     border: 2px solid black; 
 
     text-align: center; 
 
     width: 100px; 
 
     height: 100px; 
 
     float: left; 
 
     line-height: 100px; 
 

 
    }

<body> 
 
    <div id="grandbox"> 
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    </div> 
 
</body>

來源

2016-08-05 13:17:11 Adam

回答

相關問題