此文为【慕课网】如何用CSS进行网页布局–挑战编程作业 的相关记录。
【任务】
任务1：完成顶部（top）、底部（foot）宽度自适应
任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应
任务3：要求右侧（right）先加载，左侧（left）后加载
任务4：编写的代码要兼容ie6
预期效果
最终代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:50px;background:#CCC;}
.main{height:120px;background:red;}
.left{height:120px;width:200px;background:blue;position: absolute;top: 50px;}
.right{height:120px;background:lightgreen;margin-left:210px;}
.foot{height:30px;background:orange;clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>【遇到的问题】
1.右边无法自适应宽度
【代码】
.left{height:120px;width:200px;background:blue;float:left;}
.right{height:120px;background:lightgreen;float:right;}【结果图】
【原因分析】
float标签默认以容器内的内容来适应的，如果不指定宽度就是文字的宽度。
【修改方法】
右边栏不设定为浮动标签，改为指定左边界
.right{height:120px;background:lightgreen;margin-left:210px;}2.左边无法跟右边在同一行，即使给左边留足够的宽度，还是会被挤到下一行。
【代码】
.left{height:120px;width:200px;background:blue;float:left;}
.right{height:120px;background:lightgreen;margin-left:210px;}【结果图】
【原因分析】
① right没有脱离文档流的设置，如浮动或者position:absolute，也就是说此时right还是标准的块状元素，块状元素的特点就是独占一行。
② 由于在下面的HTML代码中，right在前，left在后，所以right先加载后就把left的蓝色块挤到下一行。(left在前，right在后则在同一行显示)
【解决方法】
方法一：left设置绝对定位(不受right的影响)，空出top的位置，脱离文档流自成一层
.left{height:120px;width:200px;background:blue;position:absolute;top:50px;}
.right{height:120px;background:lightgreen;margin-left:210px;}方法二：main，right都设定宽度，再把right设置为float:right 不太推荐，失去自适应
扫一扫
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
