老师帮我改进一下
来源：2-14 编程练习
慕工程0025061
2019-07-08 02:05:05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body{
padding:0;
margin:0;
}
.cont{
width: 1200px;
margin:0 auto;
}
.one{
width:1050px;
height:400px;
margin:0 auto;
background:blue;
text-align:center;
padding:0px 70px;
padding-top:90px;
}
.one .left{
float:left;
}
.one .right{
float:right;
}
.one2{
width:1200px;
height:150px;
background:pink;
}
.midd{
float: left;
padding:40px 95px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="cont">
<div class="one">
<div class="left"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"/></div>
<div class="right"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"/></div>
</div>
<div class="one2">
<div class="midd"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"/></div>
<div class="midd"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"/></div>
<div class="midd"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"/></div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕慕子
2019-07-08
同学你好， 如下图所示， 图片之间的空白间距要相等哦， 另， 上下的大盒子宽度要一样哦
建议修改：以上部分为例，
修改大盒子的宽度与下面的宽度一样为1200px;
然后添加overflow: hidden;属性清除子元素浮动造成的高度塌陷问题。
可以不设置height值， 通过设置上下内边距实现图片的上下间距效果
设置盒子的width值刚好等于图片的宽度， 包裹图片， 然后通过计算设置左外边距，实现图片的间距相等。 1200 - 360*2 等于空间为480, 图片有三处空白间距， 需要均分剩余的空间 480 / 3 = 160px;
效果图
下部分的实现思路一样， 同学可以自己下去测试一下哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题