如何达到自适应效果？谢谢！（我的有问题，窗口缩小以后）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.clearfixed{clear: both;}
img{display: block;}
.one{width: 100%;margin: 0 auto;background-color: cadetblue;}
.one img:first-child{float: left;padding: 30px 200px;}
.one img:nth-child(2){float: right;padding: 30px 200px;}
/*三列小图压根没有思路*/
</style>
</head>
<body>
<div class="one">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt="">
<div class="clearfixed"></div>
</div>
<div class="two">
<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>
</body>
</html>
正在回答
同学你好，效果出来了哦，同学可以缩小屏幕的宽度试一下：
1、当窗口宽度大于1200px时，图片是正常显示的，减小的是左右两边的空白处：
2、当窗口宽度小于1200px时，图片会显示不全，但是布局不会发生变化：
但是在这个练习中，由于最外层的盒子big设置了固定宽度1200px，所以不用设置最小宽度min-width也是可以的哦。
3、当盒子的宽度是浏览器窗口的100%时，就必须要设置最小宽度了，我举了个例子同学可以看一下：
（1）当盒子的宽度为浏览器窗口的100%且不设置最小宽度时：
我们缩小窗口：
可以发现第二张图片被挤到了第二行，排版乱了。
（2）当我们给固定宽度时：
会发现即便没有设置最小宽度，网页的布局也不会错乱。
设置最小宽度是同样的效果，同学可以自己实现一下哦，便于理解。
希望我的回答能够帮助到你，望采纳，祝学习愉快！
同学你好，
1、首先要实现自适应效果的知识我们还没有学到哦，在第三阶段移动开发的才会学到，同学学到的时候就知道怎么做了，现阶段我们可以给网页设置一个最小宽度来实现，当窗口缩小后到最小宽度后，内容不再发生变化：
2、对于这个练习来说，我们可以先给整体设置一个固定宽度，让其在网页中水平居中。
（1）先给第一行和第二行外嵌套一个盒子：
（2）暂定外层盒子content的宽度为1200px，通过margin： 30px auto来实现水平居中和与网页顶部的距离：
（3）由于最外层的盒子宽度为1200px，第一行有两列，所以我们可以让每一列占据600px：
（4）又因为每张图片的宽度为360px，图片盒子的宽度为600px，所以还剩下600-360=240px，可以给图片设置左右margin值为120px：
第一行的样式就设置完了。
3、第二行很跟第一行是类似的 哦，因为第二行有三列，所以每列可以占据的宽度为400px：
因为每张图片的宽度是200px，所以可以给图片设置左右margin为100px，又图片是内联元素，底部默认存在间隙，可以将图片设置为block块来实现垂直方向上的居中：
这就实现了第二行的效果。
同学可以自己尝试着实现一下哦。
希望我的回答能够帮助到你，望采纳，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星