问题一：左侧div如何覆盖在中间div上；问题二：右侧图片中的三行不同如何设置垂直居中呢
<div class="about-bottom">
<!-- 左边 -->
<div class="a-left">
<div class="a-left-title">A WORD<br/>ABOUT US</div>
<div class="a-left-des">
<div class="a-left-des1">
Praesent dignissim viverra est,sed<br/>bibendum ligula congue non.Sed ac nisl<br/>et felis gravida commodo?Suspendisse<br/>eget ullamcorper ipsum.Sespendisse<br/>diam amet.
</div>
<div class="a-left-des2">EXPLORE</div>
</div>
</div>
<!-- 中间 -->
<div class="a-middle">
<img src="images/bb3.jpg">
</div>
<!-- 右边 -->
<div class="a-right">
<div class="a-right-com">
<h2>70000</h2>
<hr class="border"/>
<h5>Students</h5>
</div>
<div class="a-right-com">
<h2>600</h2>
<hr class="border"/>
<h5>Faculty</h5>
</div>
</div>
<div class= "clear"></div>
</div>
</div>
CSS样式：
.main .about .about-bottom{
position:relative;
}
.main .about .about-bottom .a-left{
float:left;
width:370px;
font-weight:bold;
}
.main .about .about-bottom .a-middle{
float:left;
width:568px;
position:absolute;
top:0;
left:350px;
}
.main .about .about-bottom .a-right{
float:right;
width:238px;
}
.main .about .about-bottom .a-left .a-left-title{
font-size:30px;
padding:10px 0;
}
.main .about .about-bottom .a-left .a-left-des{
border:1px solid gray;
}
.main .about .about-bottom .a-left .a-left-des .a-left-des1{
padding:35px 0 20px 15px;
line-height:30px;
font-size:16px;
}
.main .about .about-bottom .a-left .a-left-des .a-left-des2{
width:102px;
height:45px;
background:black;
color:white;
text-align:center;
line-height:45px;
margin:20px 0 50px 15px;
}
.main .about .about-bottom .a-middle img{
width:568px;
height:380px;
margin-left:-100px;
}
.main .about .about-bottom .a-right .a-right-com{
border:1px solid #07cbc9;
width:238px;
height:144px;
text-align:center;
line-height:60px;
margin-bottom:20px;
}
.main .about .about-bottom .a-right .a-right-com h2{
font-size:30px;
}
.main .about .about-bottom .a-right .a-right-com .border{
width:40px;
height:1px;
background-color:#07cbc9;
margin:10px auto;
}
.main .about .about-bottom .a-right .a-right-com h5{
font-size:15px;
}
正在回答 回答被采纳积分+1
同学你好，解答如下：
1、通过提高层级的方式； z-index属性
2、无需设置垂直居中，去掉默认的边距即可；
3、布局不合理，可以优化。
总体修改如下：
效果：
相关代码（由于没有main和about相关标签，这边在每一个样式之前删除了.main .about修改）：
<style>
*{
padding: 0;
margin: 0;
}
.about-bottom {
position: relative;
width: 1100px;
/*overflow: hidden;*/
margin: 0 auto;
}
.about-bottom .a-left {
float: left;
width: 370px;
font-weight: bold;
position: absolute;
left: 0;
top: 0;
z-index: 99;
}
.about-bottom .a-middle {
float: left;
width: 568px;
position: absolute;
left: 350px;
top: 60px;
/*position: absolute;*/
/*top: 0;*/
/*left: 350px;*/
}
.about-bottom .a-right {
float: right;
width: 238px;
margin-top: 70px;
}
.about-bottom .a-left .a-left-title {
font-size: 30px;
padding: 10px 0;
}
.about-bottom .a-left .a-left-des {
border: 1px solid gray;
background: rgba(255,255,255,0.3);
}
.about-bottom .a-left .a-left-des .a-left-des1 {
padding: 35px 0 20px 15px;
line-height: 30px;
font-size: 16px;
}
.about-bottom .a-left .a-left-des .a-left-des2 {
width: 102px;
height: 45px;
background: black;
color: white;
text-align: center;
line-height: 45px;
margin: 20px 0 50px 15px;
}
.about-bottom .a-middle img {
width: 568px;
height: 380px;
margin-left: -100px;
}
.about-bottom .a-right .a-right-com {
border: 1px solid #07cbc9;
width: 238px;
height: 144px;
text-align: center;
line-height: 60px;
margin-bottom: 20px;
}
.about-bottom .a-right .a-right-com h2 {
font-size: 30px;
}
.about-bottom .a-right .a-right-com .border {
width: 40px;
height: 1px;
background-color: #07cbc9;
margin: 10px auto;
}
.about-bottom .a-right .a-right-com h5 {
font-size: 15px;
}
</style>如果我的回答帮到了你，欢迎采纳，祝学习愉快~
问题三：中间div与右边div之间的空隙如何设置呢？使用margin-left:负值；无效果
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星