13

行の負のマージンを利用して、ネストされたグリッド要素の左右のガターを排除するグリッドシステムでテーブルセル要素を使用しようとしています。これは、フロート要素とインラインブロック要素で正常に機能しますがdisplay: table、負の左マージンを尊重しながら、負の右マージンを無視する要素があります。

右マージンが負のテーブル

奇妙な、え？簡単なデモンストレーション： http： //jsfiddle.net/57FAN/1/

残念ながら、すべてのブラウザが同じ方法でこれを実装しているようです。何か案は？

PSフレックスボックスが標準化されるまで、レイアウトのテーブル-*要素に関する議論を延期しましょう。

4

2 に答える 2

6

テーブルは負のマージンを無視しませんが、幅は100％で、左に5pxシフトしています。灰色の領域を完全に塗りつぶすには、「100％+ 2*5px」が必要です。

行には幅がないため、使用可能な幅全体が使用されます。

使用する場合

.row {
  margin: 0 -5px;
  width: 100%;
}

幅が等しいことがわかります

于 2012-10-18T12:47:04.700 に答える
0

あなたのコードにはもっと多くのプロパティがmarginありpaddingます。だからそのように見えます。ここでいくつかのコードを修正しました。

フィドルデモ

于 2012-10-18T13:17:07.150 に答える