2

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

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

我想在继续并在其他图像上添加边框之前解决这个问题。我是 CSS 新手，所以也许有一些非常明显的东西我错了？

任何帮助使边界保持在图像的内侧边缘将不胜感激！

我附上了正在发生的事情的屏幕截图。 边框问题

 #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>

4

1 回答 1

0

我认为不需要您的 .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-03T16:09:25.900 回答