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>0
收起
正在回答
1回答
同学莫要着急，目前阶段实现的是电脑端的效果，在后面阶段的课程中，会详细讲解如何兼容不同大小屏幕的设备的。咱目前阶段是在电脑端能够将页面实现正常布局即可。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星