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

看看我这个错哪了，为什么左和右放到中间就出问题，单独放一个就没事

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

<head>

<style>

body{margin: 0;padding: 0;font-size: 20px;font-weight:bold}

div{text-align: center;line-height: 30px}

.top{height: 100px;background: blue}

.main{width: 800px;height: 300px;background: red;margin: 0 auto}

.left{width: 300px;height: 300px;background: yellow;float: left}

.right{width: 500px;height: 300px;background: #369;float: right}

.foot{height: 100px;background: #900;margin: 0 auto}

</style>

</head>

<body>

<div class="main">main

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

</div>

</div>

</body>

</html>

hhhs1s1s

2016-03-10

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

关注问题我要回答

702

操作

收起

5 回答

慕移动9181930
2022-03-27

谢谢鼓励。A n d r o i d 程序里必定有 o n C r e a t e 方法，不会没有的

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

收起回答

蔡明伟
2016-04-04

<div class="main"> main 这main是内容了，单独要成一个块，覆盖不了！

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

收起回答

hhhs1s1s 提问者
2016-03-10

<div class="main">main把最右main删除就行了

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

收起回答

小龙lo
2016-03-10

首先，我觉得你想得好像复杂了一些。，其实他要求完成什么就写什么就行了。。你的main设置margin: 0 auto，他左右自动了，然后你的left又是左浮动，所以main就变成了left的右边来了，

main我把他想作是一个背景，所以只设置和左右侧相同的高度，然后宽度就随便他变化了。你的top高100px，所以你可以直接给left设置绝对定位 position:absolute;top:100px;left:0px; ，然后left上面就紧贴top，并也在最左侧了。然后给left设置一个宽度，例如你的300px，把right的位置用margin-left，这样就可以将right和left的位置拉开，例如right设置margin-left:310px，这样right距离左侧边缘就是310px，距离left就是10px。

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

收起回答