0

私は、内部に約10divのコンテナdivしか与えていないという問題に遭遇しました。divを追加せずに（つまり、左列または右列にdivを追加しないで）この1列のdivを2列に変換する方法を見つけたいと思います。私はCSSソリューションを見つけることができます。

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

理想的な出力：

1      2
3      4
5      6

浮かんでいじってみましたが、うまくいきませんでした。私にお知らせください。ありがとう！

4

4 に答える 4

4

そのように：http：//jsfiddle.net/Qzj2d/？これが最も簡単な解決策です（最も美しい解決策である必要はありません）。

于 2012-04-16T19:16:53.557 に答える
1

内側のdivをコンテナの幅の半分に設定し、フロートさせます。例えば

.container { width:600px;}

.container div {
   width:300px;
   float:left;
}

実例http://jsfiddle.net/k2tQG/

于 2012-04-16T19:17:24.383 に答える
0

より適切なソリューションがすでにここに投稿されており、これから行う提案に対するサポートが大幅に不足していることを知っていますが、新しいccs3 column-countおよびcolumn-gapプロパティを使用して、任意のdivを任意の数の列に分割できます。

これへのリンクはここで見ることができます：

http://www.quirksmode.org/css/multicolumn.html

これらのプロパティは真の「印刷スタイル」レイアウトを可能にし、サポートされている場合は、親divと子divの両方を正しく整列させるためにクリアする必要がないため、これに対するサポートが非常に低いことに非常に失望しています。私はここでワームの缶を開けていることを知っていますが、これは使用するのに断然最良のオプションです。

多くの人が列のレイアウトについて質問しているのを聞いたのですが、なぜ、すでに存在するテクノロジーを使用するためのサポートがないのでしょうか... ?? 暴言でごめんなさい

于 2012-04-16T19:57:07.273 に答える
0

要素の高さが異なる可能性があるため、display: inline-blockよりも優れていると思います。ただし、 onに設定してから、要素でリセットするfloat必要があります。font-size0.container

jsfiddleの例

于 2012-04-16T19:27:12.733 に答える