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

两个问题：right无法自适应和left没有浮动没有定位也在左边，代码和效果图如下.求解？

我的想法是这样的，top和foot没有设置宽度，所以宽度直接自适应。

main作为包裹left与right也是直接自适应

问题就在中间：left通过浮动到左边，实际上把浮动去掉也在左边为什么？

right虽然通过绝对定位与left有了间距，但是无法自适应宽度，了解是内容限制，怎么办求解？

代码与效果如下。

<!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:200px;background:yellow;}

.main{height:300px;background:red;}

.right{height:300px;background:green;position:absolute;left:210px;}

.left{width:200px;height:300px;background:blue;float：left；}

.foot{height:100px;background:#ccc;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>

慕粉1470387857

2017-02-14

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

关注问题我要回答

646

操作

收起

4 回答

qq_齐步走_1
2017-02-23

right你设置了距离左边距left:210px,你没有设置右边距呀少年。你加上：right：0；就可以了

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

EricZoo
2017-02-22

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

.main{height:600px;background:red;}

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

.right{height:600px;background:yellow;left:210px;width:100%;position:absolute;}

.foot{background:orange;height:50px;}

通过删减测试，真正有用的就right内几个，其他的属性就基础定义属性就能实现了，

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

EricZoo
2017-02-22

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

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

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

.right{height:600px;background:yellow;margin-left:210px;width:100%;position:absolute;}

.foot{background:orange;height:50px;}

在设置position:absolute;属性之后right从块级元素隐性改变为内联块状元素，所以width的默认值从满屏变为包裹内容，故要重新设置width的属性100%

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

Excited_Cat
2017-02-16

给right设置一个宽度，或者采用设置right的左外边距的px值来控制right的宽度

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

举报

0/150

提交

取消

如何用CSS进行网页布局

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

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

两个问题：right无法自适应和left没有浮动没有定位也在左边，代码和效果图如下.求解？

我要回答关注问题

意见反馈帮助中心 APP下载