1

box-sizing:border-box構築した流体グリッドで使用すると問題が発生します。1 つのメイン列と、2 つのグリッド アイテムを含むセカンダリ列があります。border-bottom: 2px solid grey2 番目の列の最初のグリッド項目に追加すると、box-sizing が無視され、2 番目の列がメインの列よりもわずかに高くなっているため、グリッドが見えなくなります。これはおそらく高さを設定していないためだと思いますが、これを回避する方法がわかりませんか？

ここに私の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;
}
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、その境界線がボックス サイズの一部としてカウントされるようになり、計算された寸法が 50x50px になります。

Jeff Kaufman は、ボックスのサイジングがどのように機能するか、およびなぜボーダーボックスがより理にかなっているのかについての良いデモンストレーションを行っています。

于 2013-01-31T14:30:17.887 に答える
0

ボックスは、内容が 3:2 の比率に一致する場合にのみ整列します (たとえば、600x400 のダミー画像)。境界線を追加すると、ボックスはその比率に合わなくなります。

これを CSS ボーダーで機能させる方法はないと思います。最終的なコンテンツが画像になる場合は、境界線を画像の一部にすることをお勧めします。その後、それらは常に任意のサイズで整列します。

于 2013-01-31T14:45:41.620 に答える