这个代码效果实现了。如果要改自适应怎么改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{padding: 0;margin: 0;}
.page{width: 1200px;height: 600px;text-align: center;;position: absolute;top: 50%;left: 50%;margin-top: -300px;margin-left: -600px;}
.top{width: 100%;height: 400px;background: #add8e6;display: flex;align-items: center;}
.top img{width: 400px;height: 300px;margin: 0 auto;align-items: center;}
.bottom{width: 100%;height: 200px;background: #ffb6c1;display: flex;align-items: center;}
.bottom img{width: 220px;height: 140px;margin: 0 auto;align-items: center;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="page">
<div class="top">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
</div>
<div class="bottom">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
</div>
</div>
</body>
</html>
正在回答
你好同学，自适应属于移动端布局知识，会在后面的进阶阶段讲解。因为同学目前还没有学到，所以建议同学在学习了移动端布局知识之后，如果有兴趣，可以尝试把本题改成移动端的布局哦。
同学的代码虽然没有实现效果，但是这一种布局也是不错的。老师建议同学保留自己的布局方式。另外，本题的实现思路是如下这样：
原理 : 以上半部分图片为例 (下部分图片同理) . 整体盒子设置固定宽度 . 然后计算出盒子宽度减去两张图片的宽度就是剩余的间距 ,因为左右间距一个三处间距 ,所以用剩余的间距除以3就是每个间距的值 . 高度也是一样的 , 用总体高度减去图片的高度 , 然后除以2 ,就是上下边距的值 。
可以根据思路也练习一下，祝学习愉快 ，望采纳。
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星