Question

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

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

我希望在继续操作并在其他图像上添加边框之前解决此问题。我是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>

Answer 1

我不认为你的.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>

box-sizing border-box不适用于顶部和底部边框

1 个答案: