Css 如何使用框大小：未指定高度的流体元素上的边框框？

在我构建的流体网格上使用

框大小：边框框

时，我遇到了一个问题。我有一个主列，然后是一个包含两个网格项的辅助列。如果我将

边框底部：2px纯灰

添加到第二列框中的第一个网格项，则忽略大小调整，这会使网格看起来不明显，因为第二列现在略高于主列。有谁能建议我如何使这些看起来更均匀，我知道这可能是因为我没有设定高度，但我不知道如何解决这个问题

这是我的小提琴

CSS

body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.featured-news-col {
width: 66.66667%;
float: left;
margin-right: 0%;
display: inline;
border-right: 2px solid grey;
}

.m-news-thumb {
position: relative;
display: block;
}

.sub-article{
    border-bottom: 2px solid grey;
}

.sub-article:last-child{
    border:none;
}


img {
display: block;
height: auto;
max-width: 100%;
min-width: 100%;
}

.additional-news-col {
width: 33.33333%;
float: right;
}

---

如果希望它们的高度相同，则需要设置高度。默认情况下，HTML元素将“收缩包装”其内容，并且仅与内容一样高

框大小调整

不会改变这一点。它真正改变的是当添加边距、填充和边框时，如何确定高度和宽度

因此，例如，如果您有一个具有以下内容的

div

：

div {
  height: 50px;
  width: 50px;
  border: 5px solid black;
}

使用默认的

框大小调整

（

内容框

），该

div的计算大小实际上是60x60px（高度/宽度，加上两侧边框的大小）。但是，使用
框大小：边框框
，该边框现在被计算为框大小的一部分，使其计算尺寸为50x50px

只有当内容与3:2的比例匹配时（例如那些600x400虚拟图像），框才会对齐。通过添加边框，框不再适合该比率

我不认为有任何方法可以让CSS边框起作用。如果最终的内容将是图像，我建议将边框作为图像的一部分。然后它们总是以任意大小排列。
实际上找到了一种方法来做到这一点，而不是使用我使用的边框：在psuedo之后，在列的左/右/底部创建一个2px背景