0

「自動」divsであるラッパーを使用して、水平方向に隣接するN個を整列させるにはどうすればよいですか?width

お気に入り：

.boxes{ width:200px;height:200px;float:left; }

<div id="wrapper" style="width:auto;">
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    . . .
</div>

ラッパーに適用しようdisplay:inline;としましたが、ブラウザ/表示幅に達した後、ボックスは新しい y に入りますか?display:inline-block;

しかし、ドキュメントの幅を固定に設定すると問題は解決しますが、それは私が望むものではありません。

また、これを使用して簡単に実現できますがtables、コードが乱雑に見え、保守が困難になるため、実行したくありません。

4

1 に答える 1

0

追加

#wrapper
{
    white-space: nowrap;
}

およびボックスクラスで：float:leftに変更display:inline-block;

フィドル

これにより、ボックスがラップするのを防ぐことができます。

于 2013-10-13T12:01:09.997 に答える