2-7 如何实现页面的的布局适应不同的屏幕分辨率？

老师，请教两个问题：
1、现在实现的是固定宽度1000px内放两张图片，之后使用margin进行位置修正达到居中。假如不同的屏幕分辨率下是不是会出现问题，比如在宽度800px的分辨率或者在手机上的屏幕上显示，会不会两张图片无法放到同一行。
或者比如在超级大的屏幕宽度的分辨率下，两张图片会不会太小，如何解决这个问题？
2、第二张图片的描述我打了很多个字母，但是div中的文字宽度没有限制住，是什么原因
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">   
    <title>CSS布局</title>
    <style type="text/css">
        /*此处写代码*/
        *{
            margin:0;
            padding:0;
        }
        .top{
            width:1000px;
            margin:0 auto;
            text-align: center;
        }
        .b1{
            float:left;
            margin-top: 10px;
            margin-left:50px;
        }
        .top1 .b1 img{
            width:426px;
            height:240px;
        }
        .des{
            width: 426px;
            padding-top: 10px;
            font-size: 20px;
            font-weight: bold;
            color: #7c7d7f;
        }
    </style>
</head> 
<body>
    <div class="top">
        <h3> ENJOY THE LIFE</h3>
        <div class="top1">
            <div class="b1">
                <img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" />
                <!--426 * 240 -->
                <div class="des">Life is like a book,just read more and more refined,more write more carefully.whrn read,mind open,all things have been indifferent to heart.life is the precipitation.</div>
            </div>
            <div class="b1">
                <img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" />
                <div class="des">fadfadsfafafdafaffadfadsfafafdafaffadfadsfafafdafaffadfadsfafafdafaffadfadsfafafdafaffadfadsfafafdafaffadfadsfafafdafaf</div>
            </div>
            <div style="clear:both;"></div>
        </div>
 
    </div>
 
 
    <!-- 此处写代码 -->
</body>
</html>

慕UI3331485 2019-04-14

源自：项目：网页布局案例 2-7 编程练习

收起

1回答

樱桃小胖子回答被采纳获得+3积分 2019-04-14 18:04:00

同学莫要着急，目前阶段实现的是电脑端的效果，在后面阶段的课程中，会详细讲解如何兼容不同大小屏幕的设备的。咱目前阶段是在电脑端能够将页面实现正常布局即可。

祝学习愉快！

收起回答

慕UI3331485 提问者 #1

老师，第二张图片的描述我打了很多个字母，但是div中的文字宽度限制失效，是什么原因呢

2019-04-14 19:42:15
樱桃小胖子回复提问者慕UI3331485 #2

如果是英文字母之间没有空格，浏览器渲染的时候，会把这些字母当做是一个英文单词，默认会解析成强制不换行

2019-04-14 22:08:01