css - 複数の列でdivをフロートする方法は? 「左、中央、右」の div タグなし

Question

このように、複数の列にリストする必要があるグループがあります。

試してみましたが、動作していないようfloat: left;です。

私の結果はこれです。

問題は、divlikeleftまたはright、 orを指定できないことcenterです。

グループ リストは DB から取得されるためです。したがって、リストのサイズはさまざまで、列番号も異なります。

これが私のテストソースです。

<style>
#box {
    height: 200px;
    width: 230px;
    background-color: yellow;
}

.group span {
    font-weight: bold; 
}

.group {
    float: left;
    width: 65px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: green;
}
</style>

<div id="box">

    <div class="group">
        <span>group 1</span>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </div>

    <div class="group">
        <span>group 2</span>
        <li>item3</li>
    </div>

    <div class="group">
        <span>group 3</span>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item2</li>
        <li>item3</li>
    </div>

    <div class="group">
        <span>group 4</span>
        <li>item10</li>
    </div>

    <div class="group">
        <span>group 5</span>
        <li>item30</li>
    </div>

</div>

Answer 1

私の頭に浮かぶ唯一の解決策は、すべてのブロックに別のクラスを使用して遊ぶclear: both;ことです。要素の位置がオフセットされている場合は、マージンを使用する必要があります。そうでない場合は、フローティングを放棄して位置を使用できます

Answer 2

http://jsfiddle.net/qyQLu/に役立つと思います

HTMLコード

<div id="box">
    <div class="newclass">
        <div class="group">
            <span>group 1</span>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </div>

        <div class="group">
            <span>group 2</span>
            <li>item3</li>
        </div>
      </div>
      <div class ="newclass">
        <div class="group">
            <span>group 3</span>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item2</li>
            <li>item3</li>
        </div>
      </div>
      <div class="newclass">
        <div class="group">
            <span>group 4</span>
            <li>item10</li>
        </div>

        <div class="group">
            <span>group 5</span>
            <li>item30</li>
        </div>
      </div>
    </div>

CSS コード

#box {
    height: 200px;
    width: 230px;
    background-color: yellow;
}
.newclass
{
  width:65px;
  float:left;
  padding-left:5px;
}

.group span {
    font-weight: bold; 
}

.group {
    float: left;
    width: 65px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: green;
}

Answer 3

これは単純な列レイアウトです。

column-count:3;

ただし、単体でサポートしているのはIE10のみです。Firefox および Chrome の場合:

-moz-column-count:3;
-webkit-column-count:3;