1

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

这是我的 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;
}
4

2 回答 2

3

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

box-sizing不会改变这一点。它所改变的是添加边距、填充和边框等内容的方式height和确定方式。width

因此，例如，如果您有div以下内容：

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

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

Jeff Kaufman 很好地演示了 box-sizing 的工作原理，以及为什么 border-box 更有意义。

于 2013-01-31T14:30:17.887 回答
0

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

我认为没有任何方法可以使用 CSS 边框。如果最终内容是图像，我建议将边框作为图像的一部分。然后他们将始终以任何大小排列。

于 2013-01-31T14:45:41.620 回答