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

This将成为现代浏览器的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列。

更新：Here's the same with divs，仅用于证明......

更新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/