把div換成新行造成有趣的行爲

如果任何一個嵌套div的長度比相鄰的div長，那麼div不會正確換行到下一行。把div換成新行造成有趣的行爲

沒有劃分它自己的div中的每一行，是否有辦法迫使div＃5（在下面的例子中）落在div＃1下面，即使div＃1比其他的更高？

<style type="text/css"> 
    .video-item { 
     margin: 10px 29px 20px 0px; 
     width: 208px; 
     float: left; 
     overflow: hidden; 
} 
</style> 

<div style="width: 948px;"> 
    <div class="video-item">1<br>This is what happens when Description is too long...   </div> 
    <div class="video-item">2<br>Description</div> 
    <div class="video-item">3<br>Description</div> 
    <div class="video-item">4<br>Description</div> 
    <div class="video-item">5<br>Description</div> 
    <div class="video-item">6<br>Description</div> 
    <div class="video-item">7<br>Description</div> 
    <div class="video-item">8<br>Description</div> 
    <div class="video-item">9<br>Description</div> 
    <div class="video-item">10<br>Description</div> 
</div>

Example with even Description

Example with uneven Description

來源

2012-04-03 bradley4

這不是一個奇怪的行爲，它的方式浮動左div的堆棧。想象一下，他們是俄羅斯方塊塊不是從上到下，而是從右到左。 '5 Description'塊不能再向左移動，因爲1太高。 – 2012-04-03 22:45:10

感謝您的解釋pinouchon – bradley4 2012-04-03 22:53:53

給我一個小箭頭，然後，它意味着相同:) – 2012-04-03 22:54:52

您需要設置clear CSS樣式的DIV，使其恢復到正常流程：

<style type="text/css"> 
    .video-item { 
     margin: 10px 29px 20px 0px; 
     width: 208px; 
     float: left; 
     overflow: hidden; 
    } 
    .clear { 
     clear: left; 
    } 
</style> 

<div style="width: 948px;"> 
    <div class="video-item">1<br>This is what happens when Description is too long...   </div> 
    <div class="video-item">2<br>Description</div> 
    <div class="video-item">3<br>Description</div> 
    <div class="video-item">4<br>Description</div> 
    <div class="video-item clear">5<br>Description</div> 
    <div class="video-item">6<br>Description</div> 
    <div class="video-item">7<br>Description</div> 
    <div class="video-item">8<br>Description</div> 
    <div class="video-item clear">9<br>Description</div> 
    <div class="video-item">10<br>Description</div> 
</div>

有了CSS3，你可以使用:nth-child以更動態地實現此目的：

.video-item:nth-child(4n+1) { 
    clear: left; 
}

來源

2012-04-03 22:38:45 Pete

我在這裏學習的東西。 'nn-child（4n）'很聰明 – 2012-04-03 22:40:32

確認，它應該是'nth-child（4n + 1）' - 只有在現代瀏覽器中可用，所以最初的解決方案就是應該使用的解決方案。 – Pete 2012-04-03 22:44:05

另一種解決辦法是迫使你的元素這樣的高度：（但@Pete解決方案更優雅）

.video-item { 
    margin: 10px 29px 20px 0px; 
    width: 208px; 
    float: left; 
    overflow: hidden; 
    height: 70px; 
}

jsFiddle here

來源

2012-04-03 22:42:26

把div換成新行造成有趣的行爲

回答

相關問題