盒子大小的边框不工作的顶部和底部边框

我正在学习为自己建立一个响应式网站。我在其中一张图像的顶部和底部边框上遇到了框尺寸边框的问题。我有两列不同高度的图像，我希望边缘匹配，但我也希望有几个像素的白色空间来分隔每个图像。盒子大小的边框不工作的顶部和底部边框

我的问题是当在上下边框上使用框大小的边框时，它们会停留在图像边缘之外，从而将下面的图像向下推动几个像素，使其不再匹配它的邻居底部边缘。

我想在继续之前解决此问题并在其他图像上添加边框。我是新来的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

盒子大小的边框不工作的顶部和底部边框

回答

相关问题