Question

所以我在网站上工作，我有4个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>

该网站是surveyoup.com。我在这里尝试了一些东西，比如底部：0;，但那没有帮助

Answer 1

此问题是Equal Column height问题。解决它有很多指南：

快速而肮脏的修复是使用固定高度，这可以通过在CSS中提供：

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

另一个解决方法是使用tabular design。由于我们不应该使用table进行布局，因此有些人仍然会将display: table和display: table-cell用于<div>和其他人。您可以尝试以下方法：

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

另一种解决方法是使用FlexBox，仅现代浏览器支持。这为它提供了桌式设计。

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

注意：更重要的是，看起来您正在重复使用相同的ID。你不能这样做。将#smallbox更改为.smallbox，以便所有浏览器看起来更好。

Answer 2

问题称为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>

Answer 3

如果你的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

如何在CSS中排列并排Div图层的底部

3 个答案: