一個浮動在另一個浮動頂部

所有的浮動都是浮動的：左邊;第四里已經爬上了第一里。一個浮動在另一個浮動頂部

我想第四個李是自己的，不會影響第一個李。

這裏的結果http://jsfiddle.net/TomasRR/s9nQ6/6/embedded/result/

下面的代碼http://jsfiddle.net/TomasRR/s9nQ6/6/

<ul> 
    <li> 
     <div class="front">1</div> 
     <div class="back">Back</div> 
    </li> 
    <li> 
     <div class="front">2</div> 
     <div class="back">Back</div> 
    </li> 
    <li> 
     <div class="front">3</div> 
     <div class="back">Back</div> 
    </li> 
    <li> 
     <div class="front">4</div> 
     <div class="back">Back</div> 
    </li> 
</ul> 

li { 
    height: 150px; 
    width: 400px;  
    list-style: none;  
    background: red;   
    float: left;   
    margin-right: 20px;  
    margin-bottom: 50px; 
    margin-top: 10px;    
} 
.front, .back { 
    width: 100%; 
    height: 100%; 
} 
.front {  
    background: gray; 

} 
.back { 
    background: yellow; 
}

來源

2014-07-08 Tomas.R

當屏幕分辨率太小而不能包含所有4個li時，我只會遇到這個問題。代碼看起來很好，一切看起來很正常減少李的寬度。 –

在將來你應該發佈一個截圖，除了HTML結果。在Firefox 30.0上，它看起來非常好：http://i.imgur.com/DProK9d.png編輯：即使分辨率太小，他們也會在同一列 – Blindy

上以1-> 2-> 3-> 4 ，您應該從.front，.back中提取高度值。你將它們都設置爲包含它們的li的高度的100％。 – VikingBlooded

看來，你已經設置了li S中的高度值比你阻止包含正面和總體高度較小背部。當瀏覽器窗口變得足夠小，並且項目開始分解到新行時，它們將從最後開始向下150px，因此您的重疊。您可能需要隱藏背部或調整li的高度，以考慮元素的整個高度。當中斷到新行時，您可能還需要在行之間留出一些空格（填充或邊距）。

來源

2014-07-08 16:57:24 user3817362

一個浮動在另一個浮動頂部

回答

相關問題