css - 如何使用盒子大小:border-box on a fluid element with no height assigned?

Question

在我构建的流体网格上使用 box-sizing:border-box 时遇到问题。我有 1 个主列，然后是一个包含 2 个网格项的辅助列。如果我将 border-bottom: 2px Solid grey 添加到辅助列中的第一个网格项，框大小将被忽略，这会使网格看起来不一样，因为第二列现在比主列稍高。任何人都可以建议我如何使这些看起来均匀，我知道这可能是因为我没有设置高度，但我不知道如何解决这个问题？

这是我的 JS Fiddle http://jsfiddle.net/97qpV/

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;
}

Answer 1

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

box-sizing 不会改变这一点。它所做的改变是添加边距、内边距和边框等内容时如何确定高度和宽度。

例如，如果您有一个包含以下内容的 div:

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

使用默认的 box-sizing (content-box)，计算出的 div 的大小实际上是 60x60px(高度/宽度，加上两侧边框的大小)。但是，使用 box-sizing: border-box，该边框现在被计为框大小的一部分，使其计算出的尺寸为 50x50px。

Jeff Kaufman has a good demonstration of how box-sizing works, and why border-box makes more sense.