Question

如何将div left3 bottom 和 left4 bottom 对齐到底部（如 left2 bottom ）并拉伸 left2 top div超过全宽？

我试过了vertical-align: bottom;，但没有用。

欢呼声，皮特

<!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>

Answer 1

您是否尝试在css中使用“bottom”？

 .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;
}

如果.left3和.left4都设置为float:left，则会出现两个重叠的问题。为此你可以使用不同的浮点设置，或者在css中使用left或right，就像我们使用bottom一样。

解释

在css中，我们为bottom和.left3将.left4设置为0，这意味着两个div，距底部0像素。同样可以用于top, right left。必须将位置设置为绝对，才能使此功能起作用。

此外，最好养成在css中每个语句的末尾放置一个分号的习惯，不管括号中的结尾语句是什么。

<强>更新将wrap div的位置设置为relative，然后将div的位置设置为absolute。定位意味着内容可以相互重叠，因此您必须为内容保持固定的高度

Answer 2

希望它可以帮到你:)

.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%;
}

将DIV对齐设置为底部

2 个答案: