div和CSS一个简单的布局问题
<bodystyle="text-align:center;"><divid="header"style="width:950px;height:150px;margin...
<body style="text-align:center;">
<div id="header" style="width:950px;height:150px;margin-left:auto;margin-right:auto;background-
color:green">头</div>
<div id="contain" style="display:block;margin:10 auto 10 auto;width:950px;height:auto;" >
<div id="left_part" style="display:inline- block;float:left;width:200px;height:1600px;background-
color:blue"><b>左侧</b></div>
<div id="right_part" style="display:inline-block;float:right;width:750px;height:1600px;background-
color:red"><b>右侧</b></div>
</div>
<div id="fd_part" style="width:950px;height:150px;background-color:yellow">底部</div>
</body>
是一个【头】、一个【中间】分左、右；然后一个【底】的布局；不知道哪里错了；老是重叠；高手也可以自己写一下这个布局，我看看，现在我比较乱 展开
<div id="header" style="width:950px;height:150px;margin-left:auto;margin-right:auto;background-
color:green">头</div>
<div id="contain" style="display:block;margin:10 auto 10 auto;width:950px;height:auto;" >
<div id="left_part" style="display:inline- block;float:left;width:200px;height:1600px;background-
color:blue"><b>左侧</b></div>
<div id="right_part" style="display:inline-block;float:right;width:750px;height:1600px;background-
color:red"><b>右侧</b></div>
</div>
<div id="fd_part" style="width:950px;height:150px;background-color:yellow">底部</div>
</body>
是一个【头】、一个【中间】分左、右；然后一个【底】的布局；不知道哪里错了；老是重叠；高手也可以自己写一下这个布局，我看看，现在我比较乱 展开
6个回答
展开全部
<body style="text-align:center;">
<div id="header" style="width:950px;height:150px;margin-left:auto;margin-right:auto;background-color:green">头</div>
<div id="contain" style="display:block;margin-left:auto;margin-right:auto;width:950px;height:auto;" >
<div id="left_part" style="display:inline-block;float:left;width:200px;height:1600px;background-color:blue"><b>左侧</b></div>
<div id="right_part" style="display:inline-block;float:left;width:750px;height:1600px;background-color:red"><b>右侧</b></div>
</div>
<div id="fd_part" style="width:950px;height:150px;background-color:yellow;margin-left:auto;margin-right:auto;clear:both; border:0px; padding:0px; ">底部</div>
</body>
<div id="header" style="width:950px;height:150px;margin-left:auto;margin-right:auto;background-color:green">头</div>
<div id="contain" style="display:block;margin-left:auto;margin-right:auto;width:950px;height:auto;" >
<div id="left_part" style="display:inline-block;float:left;width:200px;height:1600px;background-color:blue"><b>左侧</b></div>
<div id="right_part" style="display:inline-block;float:left;width:750px;height:1600px;background-color:red"><b>右侧</b></div>
</div>
<div id="fd_part" style="width:950px;height:150px;background-color:yellow;margin-left:auto;margin-right:auto;clear:both; border:0px; padding:0px; ">底部</div>
</body>
追问
嗯，原来是fd_part加上一个clear 不允许两边div,按顺序不是应该罗列到最后，为什么不加就会叠加呢？如果一个div相对上一个div的距离可以直接写麽？
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="top" style="border:5px solid #000; width:950px; margin:0 auto;">上面</div>
<div style="margin:0 auto; width:960px;">
<div style="border:5px solid #F00; width:250px; float:left; overflow:hidden;">中左</div>
<div style="border:5px solid #00F; width:690px; float:right; overflow:hidden;">中左</div>
</div>
<div class="top" style="border:5px solid #0FF; clear:both; width:950px; margin:0 auto">下面</div>
<div style="margin:0 auto; width:960px;">
<div style="border:5px solid #F00; width:250px; float:left; overflow:hidden;">中左</div>
<div style="border:5px solid #00F; width:690px; float:right; overflow:hidden;">中左</div>
</div>
<div class="top" style="border:5px solid #0FF; clear:both; width:950px; margin:0 auto">下面</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<head>
<style>
div{ border:1px solid #000000; margin-bottom:10px;}
</style>
</head>
<body>
<div style="width:950px; margin:0 auto; border:none;">
<div style="height:150px;">头</div>
<div style="border:none">
<div style="float:left;width:200px;height:400px;"><b>左侧</b></div>
<div style="float:right;width:740px;height:400px;"><b>右侧</b></div>
</div>
<div style="width:950px;height:150px; clear:both;">底部</div>
</div>
</body>
<style>
div{ border:1px solid #000000; margin-bottom:10px;}
</style>
</head>
<body>
<div style="width:950px; margin:0 auto; border:none;">
<div style="height:150px;">头</div>
<div style="border:none">
<div style="float:left;width:200px;height:400px;"><b>左侧</b></div>
<div style="float:right;width:740px;height:400px;"><b>右侧</b></div>
</div>
<div style="width:950px;height:150px; clear:both;">底部</div>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
底的样式里面加个浮动样式 float:left; 这样这个层就会出现了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道呀
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没看懂你是什么意思，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
