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

main的左右顺序不一样，效果不一样，为什么会这样

但是我把main中的right写在left上面就会出现这样的结果

麻烦大神帮我看下什么原因，谢谢

慕粉3879583

2016-10-03

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

关注问题我要回答

905

操作

收起

6 回答

人非草木
2016-11-28

你确定图2效果中的源代码是图1吗？？我原封不动的抄写了你的代码，包括你.left里的top;0这个错误也一样，但是也没达到你图2中的效果，right根本没有占满main的右边部分，你.right中设置position:absolute后，.right脱离文档流成为行内块级元素，默认宽度是文档宽度（也就是跟right这个词一样宽），而你又没有给right设置宽度，所以应该就是占不满main的，所以你的源代码不一样怎么分析啊。。。。。

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

慕粉18144024425
2016-10-16

top：0；你错了

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

别惹IT男
2016-10-04

这个问题是先后加载的情况导致的，你把main中的left写在right上面出现的结果是先加载了left，也就是在这基础上先满足了left.

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

Airly
2016-10-03

而且你还改了标签位置，标签给的先是right后是left

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

#1

活在梦里3980862

这句先right后Left,怎么做到？或者区别在哪里，这句不太明白

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

#2

Airly 回复活在梦里3980862

要求右侧（right）先加载，左侧（left）后加载，区别就在于值不同了噻。

2016-10-18 回复有任何疑惑可以回复我~

Airly
2016-10-03

先说个问题，你.right里面没有float。而且你做的不合题意啊。题目是top和footer自适应，main也应该是自适应只不过left是200px

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

Airly
2016-10-03

<!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{width:auto;background-color:gray;}

.main{width:auto;height:450px;background-color:red;}

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

.right{width:100%;height:450px;background-color:green;float:right;position:absolute;margin-left:210px;}

.foot{background-color:orange;}

</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>

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

举报

0/150

提交

取消

如何用CSS进行网页布局

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

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

main的左右顺序不一样，效果不一样，为什么会这样

我要回答关注问题

意见反馈帮助中心 APP下载