2

Webkit のみのブラウザー用の CSS グリッド クラスのセットを作成することを検討しています。blueprit/bootstrap/compass に似ているはずですが、浮動小数点の配置に依存しているため、使用したくありません。

私はこのようなものが欲しいです:

span-1 {width:10%;display:inline-block}
span-2 {width:20%;display:inline-block}

等々。これに display:table-cell と inline-block を使用する利点はありますか? または、より良いアプローチがありますか?

4

1 に答える 1

3

実際display: tableには、おそらくあなたが探しているソリューションです(ターゲットブラウザのため)。テーブルを使用せずにグリッド レイアウトを取得できるように、ブラウザーに追加されました。パーセンテージも必要ありません (追加する列の数によって、子要素の幅が決まります)。

デモ

モバイル ブラウザーを使用していて、水平方向のリストから垂直方向のリストに動的なレイアウト シフト (メディア タグ) を使用する場合は、唯一の注意点があります。独自のメディアタグを追加する(そしてラッパーにクラスを追加する)のは大したことではないと思います...

おそらく機能する可能性がありますが、パーセンテージを使用している場合、1ピクセルでもオフになり、ラップが開始されるため、display: inline-block必ず使用してください..box-sizing: border-box

于 2012-08-14T14:58:54.373 に答える