老师好，请问为什么我的main里边content，没有包含住dl里的图片呢？谢谢啦
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css网页布局</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!-- 头部 --> <div class="header"> <div class="logo"> <img src="image/logo.png" alt="logo"> </div> <div class="nav"> <ul> <li>首页</li> <li>手记</li> <li>图片</li> <li>视频</li> </ul> </div> </div> <!-- 主页 --> <div class="main"> <div class="top"> <img src="image/1.jpeg"> <!-- 图片的遮罩层 --> <div class="topLayer"></div> <!-- 遮罩层的文字 --> <div class="topLayer-top"> <div class="word">MY BEAUTIFUL LIFE</div> <button>LOOK MORE></button> </div> </div> <div class="middle"> <div class="m-top"> <div class="commen weibo"> <img src="image/weibo.png"> <div class="comm">MICROBLOG</div> </div> <div class="commen weixin"> <img src="image/weixin.png"> <div class="comm">WECHAT</div> </div> <div class="commen qq"> <img src="image/qq.png"> <div class="comm">QQ</div> </div> </div> <div class="clear"></div> <div class="m-middle"> "I want to give good things to record down,<br>after the recall will be very beautiful." </div> <div class="clear"></div> <div class="m-bottom"> <div class="m-com"> <img src="image/03-01.jpg"> <div class="dis1">Cool Image</div> <div class="dis2">Record The Picture</div> </div> <div class="m-com"> <img src="image/03-02.jpg"> <div class="dis1">Cool Image</div> <div class="dis2">Record The Picture</div> </div> <div class="m-com"> <img src="image/03-03.jpg"> <div class="dis1">Cool Image</div> <div class="dis2">Record The Picture</div> </div> </div><div class="clear"></div> </div> <div class="clear"></div> <div class="bottom"> <div class="content"> <div class="title">FROM THE PHOTO ALBUM </div> <div class="clear"></div> <div class="pic-content"> <dl> <dt><img src="image/04-01.jpg"></dt> <dd class="word">Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.</dd> </dl> <dl> <dt><img src="image/04-02.jpg"></dt> <dd class="word">Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more. </dd> </dl> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <!-- 底部 --> <div class="footer">© 2016 imooc.com 京ICP备13046642号</div> </body> </html>
我的页面显示是这样的：
14
收起
正在回答
2回答
同学你好，是由于.main .bottom高度塌陷导致的，建议如下设置：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
是鹿呦呦呀
2020-03-11 12:04:47
补充：我的css代码如下：
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
}
.header img{
width: 300px;
height: 85px;
padding-left: 100px;
padding-top: 8px;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
}
.header .nav ul{
padding-right: 100px;
}
.header .nav ul li{
list-style: none;
float: left;
width: 80px;
height: 100px;
line-height: 100px;
font-size: 15px;
color: #7d7d7d;
font-weight: bolder;
}
/*主页*/
.main .top{
width: 100%;
height: 600px;
}
.main .top img{
width: 100%;
height: 600px;
}
/*遮罩层*/
.main .topLayer{
position: absolute;
top: 100px;
left: 0;
background-color: #000;
width: 100%;
height: 600px;
opacity: 0.5;
}
/*遮罩层文字*/
.main .topLayer-top{
width: 500px;
height: 300px;
position: absolute;
top: 400px;
margin-top: -150px;
z-index: 2;
right: 50%;
margin-right: -250px;
}
.main .topLayer-top .word{
padding-top: 100px;
color: #fff;
font-size: 45px;
font-weight: bolder;
text-align: center;
font-family: 'Microsoft Yahei';
}
.main .topLayer-top button{
width: 200px;
height: 60px;
margin-top: 50px;
color: #fff;
background-color: #f5704f;
font-family: 'Microsoft Yahei';
text-align: center;
font-weight: bolder;
font-size: 14px;
border-radius: 8px;/*设置按钮的圆角*/
margin-left: 150px;
}
.main .middle{
width: 1000px;
margin:0 auto;
}
.main .middle .m-top .commen{
float: left;
width: 33.3%;
padding-top: 50px;
text-align: center;
}
.main .middle .m-top .commen img{
width: 100px;
height: 100px;
}
.main .middle .m-top .commen .comm{
font-size: 20px;
color: #7d7c7f;
font-weight: bold;
padding-top: 20px;
}
.main .middle .m-middle{
font-size: 22px;
color: #e19796;
font-weight: bold;
padding-top: 50px;
font-style: italic;
text-align: center;
padding-bottom: 50px;
}
.main .middle .clear{
clear: both;/*清除浮动,为了让文字div的形式显示出来*/
}
.main .middle .m-bottom .m-com
{
padding: 10px;
float: left;
text-align: center;
font-weight: bold;
font-size: 20px;
}
.main .middle .m-bottom .m-com img{
width: 310px;
height: 260px;
}
.main .middle .m-bottom .m-com .dis1{
color: #7d7d7f;
padding-top: 20px;
}
.main .middle .m-bottom .m-com .dis2{
padding-top: 10px;
color: #bdbdbc;
}
.main .bottom{
background-color: #f2f2f2;
}
.main .bottom .content{
width: 1000px;
/*height: 800px;*/
margin: 0 auto;
}
.main .bottom .content .title{
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: 'Microsoft Yahei';
padding-top: 50px;
padding-bottom: 50px;
}
.main .bottom .content .pic-content dl{
float: left;
width: 470px;
margin: 10px 12px;
}
.main .bottom .content .pic-content dl dd{
padding-top: 20px;
}
.main .bottom .content .pic-content dl dt img{
width: 470px;
height: 460px;
}
.main .bottom .content .pic-content dl .word
{
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #7d7c7f;
padding-bottom: 50px;
}
.footer{
width: 100%;
height: 100px;
background-color: #292C35;
color: #ffffff;
text-align: center;
line-height: 100px;
font-family: "微软雅黑";
font-size: 15px;
}谢谢 ♪(･ω･)ﾉ
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星