                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

求大神帮忙看看哪里错了，小弟新手尽力了。。

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{height:100px;background:#ccc;}

.main{width:600px;height:500px;}

.left{width:200px;height:500px;background:blue;float:left;}

.right{height:500px;background:green;float:right;}

.foot{height:50px;background:orange;margin:0 auto;}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

001122

2016-08-16

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

509

操作

收起

2 回答

慕saber
2016-08-17

<!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:100px; background:#ccc;}
.main{width:100%; background:red; position:relative;}
.left{width:200px; background:blue;}
.right{background:green; position:absolute; top:0px; left:210px; right:0px;bottom:0px;}
.foot{ margin:0px auto; background:#f9c; 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>

这样或许可以，右边要自适应所以应该不能用float

0 回复有任何疑惑可以回复我~

收起回答

慕函数3626458
2016-08-16

按照给的效果图top、main、foot的宽度应该设置成一样的。然后你.right没有设置宽度所以他显示的是默认的宽度。图中main里面的left和right中间还有一块红色的区域，按照我的理解是，main的背景颜色是红色的，然后left和right之间有个margin值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>混合布局编程挑战</title>

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{width:900px;height:100px;background:pink;margin:0 auto;}

.main{width:900px;height:600px;background:red;margin:0 auto;}

.left{float:left;height:600px;width:200px;background:blue;}

.right{float:left;height:600px;width:690px;margin:0 0 0 10px;background:green;}

.foot{height:150px;width:900px;margin:0 auto;background:orange;}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

001122 提问者

但是题目要求不是说right要自适应，所以就不设置宽度吗？

2016-08-17 回复有任何疑惑可以回复我~

慕函数3626458 回复 001122 提问者

自适应的话你把它改成百分比就可以了吧

2016-08-17 回复有任何疑惑可以回复我~

0/150

提交

取消

如何用CSS进行网页布局

参与学习 209624 人
解答问题 1153 个

用最简洁的案例教你布局的那些知识，这是前端工程师基本技能

进入课程

求大神帮忙看看哪里错了，小弟新手尽力了。。

我要回答关注问题

热搜

最近搜索清空

求大神帮忙看看哪里错了，小弟新手尽力了。。

2 回答

求大神帮忙看看哪里错了，小弟新手尽力了。。