如何在CSS中排列並排div層的底部

-3

所以我在一個網站上工作，我有4個DIV框從左到右。我如何獲得背景排列在底部？原來的網站是在互聯網wayback機器，他們奠定了這種方式，但我使用不同的主題。如何在CSS中排列並排div層的底部

繼承人什麼我已經寫：

#smallbox { 
position: relative; 
float: left; 
width: 23%; 
background-color: #1B5492; 
margin: 1%; 
bottom: 0; 
} 
#smallbox img { 
padding: 0; 
margin: -23px 0px 0px 0px; 
} 
#smallbox h3 { 
color: #0CCEBE; 
} 
#smallbox p { 
color: #ffffff; 
min-height: 200px;

而且在上下文中的這個例子是：`

<img src="" alt="UNLIMITED PROFITS" /> 
<h3>How Much Can I Make?</h3> 
The average work day for doing surveys is about 2 hours, and the average income per month is $4500. Do the math: 2 hours a day x 30 days a month = 60 hours a month. $4500/60 hours = $75/hour. How many 9 to 5 boring office jobs pay that? 

</div>

該網站是surveysoup.com。我在這裏嘗試了一些東西，如底部：0 ;,但沒有幫助

來源

2015-07-13 Dan Smith

該問題未顯示研究工作量。 –

你想讓自己的背景伸展到底部，還是要將同一條線上的所有底角對齊？你應該添加一些CSS到你的問題！ –

你可以試試'#smallbox p {min-height：200px;}' –

此問題是等列高度問題。有很多導遊的解決它：

一個快速和骯髒的解決辦法是使用一個固定的高度，這可以通過給這個做在您的CSS中：

#smallbox p {min-height: 200px;}

另一個修復方法是使用tabular design。由於我們是而不是應該使用table s來進行佈局，有些人仍然使用display: table和display: table-cell以及<div> s和其他人。你可以嘗試以下方法：

#smallbox {display: table;} 
#smallbox p {display: table-cell; height: 100%;}

另一個解決辦法是使用FlexBox，僅受現代瀏覽器的支持。這給了它一個桌子樣式設計。

#smallbox {display: flex;} 
#smallbox p {flex: 1;}

注：而更重要的是，它看起來像你重用相同的ID。你不能這樣做。將#smallbox更改爲.smallbox，以便它對所有瀏覽器都更好。

來源

2015-07-13 08:43:46

的問題被稱爲equal height columns

.row{ 
 
    display: flex; 
 
} 
 

 
.cols{ 
 
    flex: 1; 
 
}

<div class="row"> 
 
    <div class="cols">...</div> 
 
    <div class="cols">...</div> 
 
    <div class="cols">...</div> 
 
</div>

來源

2015-07-13 08:44:53 Trix

如果您的div #smallbox不改變它們的大小和高度，你可以使用一個簡單的解決辦法：

min-height: 580px;

如果他們打算要改變，你可以將它們嵌套在一個容器div內：

<div id="container"> 
<div class="smallbox">Content</div> 
<div class="smallbox">Content</div> 
<div class="smallbox">Content</div> 
<div class="smallbox">Content</div> 
</div>

將集裝箱高度設置爲min-height: 570px，並將height: 100%指定給您的#smallbox。

請注意classes和ids之間的區別。每個html頁面最後應該只能使用一次！Read about class vs id

來源

2015-07-13 08:45:55

感謝您的建議。我新來的CSS工作。使用類與ID的任何特定原因？ –

我已經添加了一個快速回答我的答案。簡短說明：使用類添加重複樣式，同時將唯一樣式添加到ID。每個ID只能在每頁上使用一次！ –

如何在CSS中排列並排div層的底部

回答

相關問題