麻烦老师查看代码，谢谢！
来源：2-14 编程练习
MemoryNic
2019-08-13 15:39:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {margin:0;
padding:0;}
.top {width:800px;
height:auto;
margin:0 auto;
background:#99FFFF;
text-align:center;}
.top .left {width:50%;
height:360px;}
.top .right {width:50%;
height:360px;}
.top img {width:360px;
height:215px;
margin:10px;}
.bottom {width:800px;
height:auto;
margin:0 auto;
background:#FF9999;
text-align:center;}
.bottom img {width:200px;
height:60px;
margin:10px 20px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="contatiner">
<div class="top">
<span class="left">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"/>
</span>
<span class="right">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"/>
</span>
</div>
<div class="bottom">
<span>
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"/>
</span>
<span>
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"/>
</span>
<span>
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"/>
</span>
</div>
</div>
</body>
</html>
1回答
-
同学你好，
代码布局是可以的，但是间隙还需要调整：
图片与边界之间的距离与图片与图片与之间的间隙需要是相等的。
以第一排图片为例：
span是内联元素，设置宽度和高度是不起作用的，可以调整为inline-block元素，如下：
每个小盒子宽度为360px，两个就是720px。大盒子宽度为800px，剩余80px就是3个间隙的宽度，均分大概就是80/3=26.667px。第二排也是同样的计算方式，可以调整下哦。
祝学习愉快！
0
相似问题