为什么m-bottom上的第三章图片跑下面去了，跟老师一样的代码啊
来源：2-6 主体部分的中间
Leonard_
2019-05-31 20:23:20
index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页布局案例</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>
<!-- 遮罩层 -->
<div class="topLayer"></div>
<!-- 遮罩层上文字和按钮 -->
<div class="topLayer-top">
<div class="word">My Beautiful Life</div>
<div class="button">
<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="m-middle">
I want to give good things to record down,<br>after the recall will be very beautiful.
</div>
<div class="m-bottom">
<div class="m-com">
<img src="image/03-01.jpg">
<div>Cool Image</div>
<div>Record The pictures</div>
</div>
<div class="m-com">
<img src="image/03-02.jpg">
<div>Cool Image</div>
<div>Record The pictures</div>
</div>
<div class="m-com">
<img src="image/03-03.jpg">
<div>Cool Image</div>
<div>Record The pictures</div>
</div>
</div>
</div>
<div class="bottom"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>
</body>
</html>
----------------------------------------------------------------------------css 代码如下：
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
/*background: #eee;*/
padding-left: 100px;
}
.header img {
width: 300px;
height: 85px;
margin-top: 7px;
}
.header .logo {
float: left;
}
.header .nav {
float: right;
}
.header .nav ul {
padding-right: 100px;
}
.header .nav ul li {
width: 80px;
height: 100px;
float: left;
list-style: none;
line-height: 100px;
margin-right: 50px;
font-weight: bolder;
font-size: 15px;
color: #7d7d7d;
}
.mian .top {
width: 100%;
height: 600px;
}
.main .top img {
width: 100%;
height: 600px;
}
.main .topLayer {
position: absolute;
top: 100px;
left: 0px;
background: #000;
height: 600px;
width: 100%;
opacity: 0.5;
}
.main .topLayer-top {
width: 500px;
height: 300px;
/*background: blue;*/
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;
text-align: center;
font-weight: bolder;
font-family: "微软雅黑"
}
.main .topLayer-top .button{
width: 200px;
height: 60px;
margin:50px auto 0;
}
.main .topLayer-top button {
width: 100%;
height: 100%;
color: #fff;
background: #f5704f;
/*text-align: center;*/
font-family: "微软雅黑";
font-weight: bolder;
font-size: 14px;
border-radius: 8px;
/*margin-left: 150px;或者这一种方式达到水平居中外层不用嵌套div并使用margin和宽高*/
}
/*中间的这块在浏览器居中*/
.main .middle{
width: 1000px;
margin: 0 auto;
}
.main .middle .m-top{
overflow: hidden;
zoom:1;
}
/*text-align: center;这个属性只对块内的行元素起效，因为子块还是占一整行，占满父容器，但是可以继承，使子div内的文字水平居中*/
.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{
text-align: center;
font-size: 22px;
color: #e19796;
font-style: italic;
font-weight: bolder;
/*注意m-top的子元素要清除浮动，否则高度塌陷*/
padding:50px 0;
}
.main .middle .m-bottom .m-com{
float: left;
}
.main .middle .m-bottom .m-com .img{
width: 310px;
height: 260px;
}
——————————————————————-显示效果如下：
放不下三张图
1回答
-
这里获取的是img标签，因为不能写点
另外，页面出现了横向滚动条，建议去掉
祝学习愉快！
0
相似问题