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

为什么我的green很窄

<!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{background-color:#ccc;height:100px}.main{background-color:red;height:600px;position:relative;}.left{background-color:blue;width:200px;height:600px;position:absolute;margin-left:0}.right{background-color:green;margin-left:210px;height:600px;position:absolute}.foot{background-color:#f93;height:100px;}</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>

<!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{background-color:#ccc;height:100px}

.main{background-color:red;height:600px;position:relative;}

.left{background-color:blue;width:200px;height:600px;position:absolute;margin-left:0}

.right{background-color:green;margin-left:210px;height:600px;position:absolute}

.foot{background-color:#f93;height:100px;}

</style>

</head>

<body>

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

</div>

</body>

</html>

慕村1996658

2018-06-14

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

关注问题我要回答

1238

操作

收起

1 回答

Matt_Wong 回答被采纳 +2 积分
2018-06-15

.right{background-color:green;margin-left:210px;height:600px;position:absolute}

这句话中你使用了绝对定位，然后给她的左侧边缘定义了210px，但是它没有宽度啊。于是它就使用了默认的宽度也就是内容的宽度。

题目要求我们自适应它的宽度。而且right要先加载，所以我能想到的方法只有使用绝对定位定义左右的位置（left：210px;right:0px）使其限定在这个位置中。想必您也想到了，只是使用的方法有些混淆。

更改方式

.right{
    background-color:gree;
    height:600px;
    pisition:absolute;
    left:210px;   /*10px预留空位*/
    right:0px;
}

希望对你能有所帮助。

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

收起回答

Matt_Wong

在随文附带的.right中打错俩字母： 1、green —— 少了n 2、position —— 第一个o打成了i 抱歉。。

2018-06-15 回复有任何疑惑可以回复我~

慕村1996658 提问者

谢谢！我之前曾经试过margin-right:0 但是失败了，您讲的很对，是因为基础不扎实导致的使用方法混淆了。谢谢您为我解惑！

2018-06-17 回复有任何疑惑可以回复我~

qq_AG_11

为什么我用了你这个方法还是不行呢

2018-07-16 回复有任何疑惑可以回复我~

0/150

提交

取消

如何用CSS进行网页布局

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

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

进入课程

为什么我的green很窄

我要回答关注问题

热搜

最近搜索清空

为什么我的green很窄

1 回答

为什么我的green很窄