Question

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

这是我的JS小提琴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不会改变这一点。它改变的是在添加边距，填充和边框等内容时确定height和width的方式。

因此，例如，如果您的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.

Answer 2

当内容与比例3：2匹配时（例如，那些600x400虚拟图像），框仅排列。通过添加边框，框不再符合该比率。

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

如何使用box-sizing：没有指定高度的流体元素上的border-box？

2 个答案: