浮動左元素不堆棧

我有一些浮動元素的問題。我想，當你調整瀏覽器窗口箱3是對的下框1浮動左元素不堆棧

HTML：

<div class="box"> 
    <p>box 1</p> 
    <p>box 1</p> 
    <p>box 1</p> 
</div> 
<div class="box"> 
    <p>box 2</p> 
    <p>box 2</p> 
    <p>box 2</p> 
    <p>box 2</p> 
    <p>box 2</p> 
</div> 
<div class="box"> 
    <p>box 3</p> 
    <p>box 3</p> 
    <p>box 3</p> 
</div>

CSS：

.box { 
    width:80px; 
    float:left; 
    border:1px solid slateGrey; 
    margin:0 0 0 10px; 
    padding:10px; 
}

見小提琴：Fiddle

我嘗試了明確的財產，但沒有任何幫助。

來源

2013-07-25 Julez

你想要什麼 –

這是要求的行爲。 – YD1m

當你在小提琴上調整結果窗口的大小時，你會發現方框3正在方框2下方，但我想要在方框1下方，以便它下面沒有間隙 – Julez

你只能用js來做這個動態佈局。例如使用masonry插件。

來源

2013-07-25 11:57:13 YD1m

Okey ...是的，我知道這個插件，但我想知道是否只有CSS。但如果沒有其他方式我使用該插件。謝謝。 – Julez

如果您想在調整瀏覽器大小並調整特定尺寸時控制佈局，則應該查看媒體查詢。

http://en.wikipedia.org/wiki/Media_queries

有很多材料在那裏這個話題，所以我只是維基百科的鏈接以供參考。

來源

2013-07-25 11:53:15 pcalcao

我想要的是，當有2個元素的地方時，盒子3正好在盒子1下面彼此相鄰。 – Julez

這是預期的CSS行爲。如果調整瀏覽器窗口，而你有撥弄開，框下框1.如果你想框3在任何時候都顯得那樣的3次出現，你需要添加像這樣.clear類：

.clear{ 
    clear: left; 
}

您會注意到框3會出現在正確的位置，但稍低一點，就在框2的底部邊框下方。因爲所有的盒子都是浮動的，所以它們被CSS看作是在一條線上，這條線和最高的線一樣高.box。當你引入一個.clear ed的盒子時，它會出現在該行的下方。您可以調整使用margin-top的位置，例如盒3的<div>元素更改爲：

<div class="box clear" style="margin-top: -70px;">

希望這有助於。

編輯：哦，另外：如果你想要這個動態添加，當沒有空間可以並排顯示所有三個盒子時，找出你需要多少空間來將這三個盒子放在一起然後使用媒體查詢，如下所示：

@media all and (max-width: 500px){ 
    .box.clear{ 
     clear: left; 
     margin-top: -70px; 
    } 
    }

500px是您所需的空間。如果你的盒子的內容將被改變很多，我會建議不要使用這個。

來源

2013-07-25 12:00:04 Nekkoru

是的，但我有一個動態頁面，所以這些框的內容可以是不同的每次這樣margin-top：-70px;可能會在稍後的點margin-top：-120px; – Julez

@ user1502014不幸的是，你無能爲力。 JS中可能有辦法解決這個問題，但請記住，有這樣一個事情，即努力工作以重新發明輪子。最簡單的解決方案是設計一個更好的佈局，預計動態內容更改。 – Nekkoru

浮動左元素不堆棧

回答

相關問題