2-13练习问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;font-size:0px;}
.container{height:900px;width:900px;margin:0 auto;}
.top{height:700px;width:900px;background-color:#0ff;}
.bottom{height:200px;width:900px;background-color:#ffb6c1;}
img{display:block;}
.img1{float:left;margin:242.5px 30px 242.5px 60px;}
.img2{float:left;margin:242.5px 60px 242.5px 30px;}
.img3{float:left;margin:70px 37.5px 70px 75px;}
.img4{float:left;margin:70px 37.5px 70px 37.5px;}
.img5{float:left;margin:70px 75px 70px 37.5px;}
</style>
</head>
<body>
<div class="container">
<div class="top">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" class="img1">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" class="img2">
</div>
<div class="bottom">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" class="img3">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" class="img4">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" class="img5">
</div>
</div>
</body>
</html>
这个使用纯计算方法先计算各个边距，然后撑开的，，貌似能实现效果，，但是这么写是不麻烦啊？有没有其他简单方法或者其他优化的地方呢？
正在回答
你好，（1）首先使用盒子嵌套的方法也是可以的，一种效果会有很多的实现方式，关键是理解会用即可。
（2）以不嵌套盒子的为例，这个代码可以在优化下，相同的样式可统一设置，另高度有点高了不太美观，可稍微调整下，整体可参考下列代码：
<!doctype html>
<html>
<head>
<title>Document</title>
<meta charset="UTF-8">
<style>
*{margin: 0;padding: 0;}
.content{
width: 900px;
margin: 0 auto;
margin-top: 100px;
}
.top{
width: 100%;
height: 300px;
background: #add8e6;
}
.top img{
height: 214px;
margin-left: 60px;
margin-top: 43px;
}
.bottom{
width: 100%;
height: 100px;
background: #dfa1a5;
}
.bottom img{
margin-left: 75px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="top">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt="">
</div>
<div class="bottom">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt="">
</div>
</div>
</body>
</html>祝学习愉快~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{height:900px;width:900px;margin:0 auto;}
.top{height:700px;width:900px;background-color:#0ff;}
.bottom{height:200px;width:900px;background-color:#ffb6c1;}
.top-1,.top-2{height:700px;width:450px;float:left;position:relative;}
.bottom-1,.bottom-2,.bottom-3{height:200px;width:300px;float:left;position:relative;}
.img1{display:block;position:absolute;top:242.5px;left:60px;}
.img2{display:block;position:absolute;top:242.5px;left:30px;}
.img3{display:block;position:absolute;top:70px;left:75px;}
.img4{display:block;position:absolute;top:70px;left:37.5px;}
.img5{display:block;position:absolute;top:70px;left:37.5px;}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div class="top-1">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" class="img1">
</div>
<div class="top-2">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" class="img2">
</div>
</div>
<div class="bottom">
<div class="bottom-1">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" class="img3">
</div>
<div class="bottom-2">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" class="img4">
</div>
<div class="bottom-3">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" class="img5">
</div>
</div>
</div>
</body>
</html>
还有个疑问就是 我用盒子套盒子，然后定位的方法貌似也可以实现效果，，但是还是需要计算相关的边距尺寸的，，是不这样写也对吧？请老师指点
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星