3

是否可以以这种方式在 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>
4

2 回答 2

2

这将是现代浏览器的 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 列。

更新：这与 divs 相同，只是为了证明......

更新 2：如果您只是浮动包装器，Chrome (webkit) 将无法正常工作，如果您希望包装器适合，则必须为此设置宽度。

于 2013-03-27T12:45:50.090 回答
1

这是你要找的：

    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/

于 2013-03-27T12:47:11.680 回答