div之間div的具體浮動結構div

是否有可能以這種方式在div之間浮動div？div之間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>

來源

2013-03-27 user2211449

你有什麼瀏覽器支持？ – Simon 2013-03-27 12:35:43

是div的順序重要嗎？ – user1950929 2013-03-27 12:36:25

我必須支持版本10，Firefox，Safari和Chrome的Internet Explorer。是的，訂單是重要的;-) – user2211449 2013-03-27 12:40:55

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的）不能正常工作，如果你只是浮在包裝，必須設置一個寬度，如果你想包裝上，以適合。

來源

2013-03-27 12:45:50 Simon

它可以，你只需要應用'display：inline-block' ... – Simon 2013-03-27 12:48:35

非常好，我今天學到了東西！ – Pete 2013-03-27 12:59:05

儘管在webkit中似乎有點bug，但我正在努力。 – Simon 2013-03-27 13:10:17

這是你在找什麼：

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-27 12:47:11

div之間div的具體浮動結構div

回答

相關問題