CSS - 在舊的DIV上放置新的DIV

我試圖使用「vertical-align：bottom;」讓DIV從包裝器/父DIV的底部到頂部。唯一的問題是，我希望第一個DIV顯示在底部，而不是像默認情況下一樣。這只是因爲我總是希望最下面的一行通過讓最下面的一行進入最底部而完整。CSS - 在舊的DIV上放置新的DIV

DIV的順序實際上並不重要，但我真的希望最底層的「行」完全填滿上面一行，例如頂部有一個或兩個框。通過在頂部而不是在底部添加新的盒子，會導致我所描述的佈局。我希望這是有道理的。

此外，我在下面添加的代碼顯示了我一直試圖刪除的每個「列」之間的差距。如果我必須更改所有代碼來解決第一個問題，可能並不重要，但是如果有人知道這是爲什麼並且讓我知道，那將會很棒:)

謝謝！

這是我到目前爲止有：

div.wrapper { 
 
\t display: table-cell; 
 
\t vertical-align: bottom; 
 
\t height: 500px; 
 
\t width: 640px; 
 
\t background-color: lightgrey; 
 
} 
 
div.wrapper div { 
 
\t width: 200px; 
 
\t height: 50px; 
 
\t display: inline-block; 
 
} 
 
div.wrapper div p { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} \t \t

<div class="wrapper"> 
 
\t <div style="background-color: #7E7ECC;"> 
 
\t \t <p>1</p> 
 
\t </div> 
 
\t <div style="background-color: #FFA347;"> 
 
\t \t <p>2</p> 
 
\t </div> 
 
\t <div style="background-color: #80E680;"> 
 
\t \t <p>3</p> 
 
\t </div> 
 
\t <div style="background-color: #FF99C2;"> 
 
\t \t <p>4</p> 
 
\t </div> 
 
\t <div style="background-color: #A6DBEE;"> 
 
\t \t <p>5</p> 
 
\t </div> 
 
</div>

這是我想創造什麼：

這也是可以接受的：

來源

2015-09-16 Mayron

不能手動更改順序，或者你不能改變HTML？ – Chris

這真的不是訂單的問題，我只是想讓底部的「行」完全填滿，而頂部的行的空間更少，當新的商品放在頂部時，如果有意義的話，獲得的效果會更低 – Mayron

否則，當我在未來將其設計風格，設計看起來很奇怪。 – Mayron

您可以使用CSS3 flexbox佈局來做到這一點。 flex-wrap: wrap-reverse是關鍵屬性這裏，因爲它允許物品在的flex-direction: row

align-content: flex-start相反的方向纏繞，因爲卷繞順序相反用來代替*-end。

div.wrapper { 
 
    /* Added Properties */ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap-reverse; 
 
    align-content: flex-start; 
 
    /*^Added Properties */ 
 
    background-color: lightgrey; 
 
    height: 150px; 
 
    vertical-align: bottom; 
 
    width: 640px; 
 
} 
 
div.wrapper div { 
 
    width: 200px; 
 
    height: 50px; 
 
    display: inline-block; 
 
} 
 
div.wrapper div p { 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<div class="wrapper"> 
 
    <div style="background-color: #7E7ECC;"> 
 
    <p>1</p> 
 
    </div> 
 
    <div style="background-color: #FFA347;"> 
 
    <p>2</p> 
 
    </div> 
 
    <div style="background-color: #80E680;"> 
 
    <p>3</p> 
 
    </div> 
 
    <div style="background-color: #FF99C2;"> 
 
    <p>4</p> 
 
    </div> 
 
    <div style="background-color: #A6DBEE;"> 
 
    <p>5</p> 
 
    </div> 
 
</div>

來源

2015-09-16 15:22:00

哇的另一個例子，非常感謝！我從來沒有見過這些屬性，它甚至解決了差距問題。我通常討厭使用表格單元格，所以現在真的很高興。再次感謝：D – Mayron

哈哈:)歡迎！請確保您檢查出flexbox的真棒：https://css-tricks.com/snippets/css/a-guide-to-flexbox/和瀏覽器支持：http://caniuse.com/#search=flexbox –

我是現在就看着它！這讓我意識到我對CSS3 <3沒有多少了解 – Mayron

就可以解決這個問題，增加彈性佈局，以封裝和行顯示的項目，要扭轉這種局面，以獲得疊加的效果。請參見下面的CSS：

div.wrapper { 
    display: table-cell; 
    vertical-align: bottom; 
    height: 500px; 
    width: 640px; 
    background-color: lightgrey; 
    display: flex; /* added */ 
    flex-direction: row; /* added */ 
    flex-wrap: wrap-reverse; /* added */ 
    align-content: flex-start; /* added */ 
} 
div.wrapper div { 
    width: 200px; 
    height: 50px; 
    display: inline-block; 
} 

div.wrapper div p { 
    margin: 0px; 
    padding: 0px; 
}

這裏是一個FIDDLE

來源

2015-09-16 15:25:50 Chris

CSS - 在舊的DIV上放置新的DIV

回答

相關問題