盒子大小的邊框不工作的頂部和底部邊框

我正在學習爲自己建立一個響應式網站。我在其中一張圖像的頂部和底部邊框上遇到了框尺寸邊框的問題。我有兩列不同高度的圖像，我希望邊緣匹配，但我也希望有幾個像素的白色空間來分隔每個圖像。盒子大小的邊框不工作的頂部和底部邊框

我的問題是當在上下邊框上使用框大小的邊框時，它們會停留在圖像邊緣之外，從而將下面的圖像向下推動幾個像素，使其不再匹配它的鄰居底部邊緣。

我想在繼續之前解決此問題並在其他圖像上添加邊框。我是新來的CSS，所以也許有一些非常明顯的我錯了？

任何幫助讓邊界留在圖像的內部邊緣將不勝感激！

我附加了發生了什麼的屏幕抓取。 border-box problem

#rightCol { 
 
    width: 50%; 
 
    height: auto; 
 
    float: right; 
 
    box-sizing: border-box; 
 
    border-left: 2px solid white; 
 
} 
 
#rightCol img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
#leftCol { 
 
    width: 50%; 
 
    height: auto; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    border-right: 2px solid white; 
 
} 
 
#leftCol img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
.innerBorder { 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    border-top: 4px solid white; 
 
    border-bottom: 4px solid white; 
 
}

<div id="rightCol"> 
 
    <div> 
 
    <img src="./images/pa.jpg" /> 
 
    </div> 
 
    <div> 
 
    <img src="./images/game.jpg" /> 
 
    </div> 
 
    <div> 
 
    <img src="./images/spine.jpg" /> 
 
    </div> 
 
</div> 
 

 

 
<div id="leftCol"> 
 
    <div> 
 
    <img src="./images/truck.jpg" /> 
 
    </div> 
 
    <div> 
 
    <img class="innerBorder" src="./images/ccc.jpg" /> 
 
    </div> 
 
    <div> 
 
    <img src="./images/box.jpg" /> 
 
    </div> 
 
</div>

來源

2016-04-05 pretesh

'box-sizing：border-box'不改變任何東西的位置。它所做的就是讓它爲你指定一個元素的大小時，這個大小包括除了元素邊距之外的所有東西。通常，當您設置元素的大小時，大小僅適用於內容，然後將填充，邊框和邊距添加到內容中。 –

謝謝。我瞭解邊界框可以做什麼，這就是爲什麼我認爲這是網頁設計的理想選擇。它在左右邊界上正確工作，正如可以通過列之間的4px間距看到的那樣。我無法弄清的是，爲什麼圖像的頂部和底部邊界（黑匣子）不包含在圖像大小內。它們在它之外，正如它可以看到的，它將圖像向下推進。它的底部邊緣不再與右側欄底部的圖像保持一致。我該如何解決這個問題，以便我可以保持它？ – pretesh

那麼，請記住，使用'box-sizing：border-box'，邊距仍不包含在您指定的大小中，因此我會檢查是否應用了任何邊距。 –

我不認爲需要您.innerBorder風格。試試這個：

#rightCol { 
    float: left; 
    box-sizing: border-box; 
    border-left: 2px solid white; 
} 
#rightCol img { 
    max-width: 100%; 
    height: auto; 

} 
#leftCol { 
    float: left; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border-right: 2px solid white; 
} 
#leftCol img { 
    max-width: 100%; 
    height: auto; 

} 


<div id="leftCol"> 
    <div> 
    <img src="./images/truck.jpg" /> 
    </div> 
    <div> 
    <img src="./images/ccc.jpg" /> 
    </div> 
    <div> 
    <img src="./images/box.jpg" /> 
    </div> 
</div> 


<div id="rightCol"> 
    <div> 
    <img src="./images/pa.jpg" /> 
    </div> 
    <div> 
    <img src="./images/game.jpg" /> 
    </div> 
    <div> 
    <img src="./images/spine.jpg" /> 
    </div> 
</div>

來源

2016-07-03 16:09:25 firebuilder

此代碼應該看起來像這樣 firebuilder

盒子大小的邊框不工作的頂部和底部邊框

回答

相關問題