将DIV对齐设置为底部
[英]set DIV alignment to bottom
问题描述
how can I make div left3 bottom and left4 bottom align to the bottom (like left2 bottom ) and also stretch left2 top div over full width? 
如何使div left3 bottom和left4 bottom与底部对齐（如left2 bottom ），并在整个宽度上拉伸left2 top div ？
I tried vertical-align: bottom; 我尝试了vertical-align: bottom; but it does not help. 但这无济于事。
cheers, Pete 干杯，皮特
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <style type="text/css"> .wrapper{ margin: 0px auto; width: 940px; background-color: #28cf21; } .header{ width: 100%; background-color: #12bf81; } .left1{ float: left; margin-right: 20px; width: 220px; height: 500px; background-color: #fc0234; } .left2{ float: left; margin-right: 20px; width: 220px; height: 500px; background-color: #f78325; } .left2oben{ float: left; margin-right: 20px; width: 220px; height: 250px; background-color: #f78325; } .left2unten{ float: left; margin-right: 20px; width: 220px; height: 250px; background-color: #f11325; } .left3{ float: left; margin-right: 20px; width: 220px; height: 250px; background-color: #f78325; } .left4{ float: left; width: 220px; height: 250px; background-color: #f78325; } body { padding: 0px; margin: 0px; font-size: 90%; background-color: #00ccff; } </style> </head> <body> <div class="wrapper"> <div class="header"> header </div> <div class="left1"> left1 </div> <div class="left2"> <div class="left2oben"> left2 top </div> <div class="left2unten"> left2 bottom </div> </div> <div class="left3"> left3 bottom </div> <div class="left4"> left4 bottom </div> </div> </body> </html>
2 个解决方案
解决方案1
0 2016-02-08 00:25:34
Have you tried using "bottom" in css? 您是否尝试过在CSS中使用“底部”？
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom:0;
}
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21
Position:relative;
}
When both .left3 and .left4 are set to float:left there will be an issue of the two overlapping. 当.left3和.left4都设置为float:left ，将出现两个重叠的问题。 for that you can use different float settings, or use left or right in css just like we used bottom . 为此，您可以使用不同的float设置，也可以在CSS中使用left或right ，就像我们使用bottom 。
Explanation 说明
In css, we set bottom to 0 for .left3 and .left4 , this means the two divs, are 0 pixels from the bottom. 在CSS中，我们将.left3和.left4 bottom设置为0，这意味着两个div距离底部0像素。 The same can be used for top, right left . top, right left也可以使用相同的内容。 Position must be set to absolute, in order for this feature to work. 为了使此功能起作用，必须将位置设置为绝对位置。
Also, its a good idea to get into the habit of putting a semi-colon at the end of every statement in css, regardless if its the ending statement in the brackets. 另外，养成在CSS的每个语句的末尾都使用分号的习惯是一个好主意，无论其结尾语句是否放在括号中。
UPDATE Set the position for the wrap div to relative, then the position for the inner div to absolute. UPDATE将wrap div的位置设置为相对，然后将内部div的位置设置为绝对。 The positioning means the contents can overlap each other, so you must maintain fixed heights for your content 定位意味着内容可以相互重叠，因此您必须保持内容的固定高度
解决方案2
0 2016-02-08 03:22:08
hope it can helped you :) 希望它可以帮助您:)
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
bottom: 0!important;
position: absolute;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom: 0;
left:38%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.