css - div間のdivの特定のフロート構造

Question

このようにdiv間でdivをフロートさせることは可能ですか？

コード：

<div class="event_month">
<div class="event1">1</div>
<div class="event2">2</div>
<div class="event3">3</div>
<div class="event4">4</div>
<div class="event5">5</div>
</div>

Answer 1

これは、最新のブラウザのcssソリューションになります。

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS

ul {
    width: 210px;
    background: chocolate;
    margin: 20px;
    padding: 0 10px 10px;
    list-style: none;
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-width: 100px;
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    column-gap: 10px;
    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    font-size: 0;
}

li {
    display: inline-block;
    width: 100px;
    height: 60px;
    background: beige;
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    line-height: 60px;
}

注：IE10はCSS列を理解していると思います。

更新：これはdivでも同じですが、証拠として...

アップデート2：ラッパーをフロートさせるだけではChrome（webkit）が正しく機能しません。ラッパーをフィットさせるには、その幅を設定する必要があります。

Answer 2

これはあなたが探しているものですか：

    HTML:
<div class="event_month outer_styling">
  <div class="float-left">
    <div class="event1">1</div>
    <div class="event2">2</div>
    <div class="event3">3</div>
  </div>
  <div class="float-left">
    <div class="event4">4</div>
    <div class="event5">5</div>
  </div>
</div>

Css：

.float-left {
    float: left;
}

デモ： http： //jsfiddle.net/SSxWz/2/