：一个DIV布局小疑点
日期：2014-05-17 浏览次数：20543 次
请教高手：一个DIV布局小问题
左边的层重叠了。
右边的灰色区域没有自动和左边一起拉高。
错在何处呢？代码如下：
<!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 content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style type="text/css">
#base {margin: 0px auto; width: 990px;background:#ccc;display：block;}
#sidebar {padding: 0px; width: 170px; overflow: hidden; float: left; background:#666;position: relative;}
.copy { position:absolute; bottom:0px;text-align:center;margin:0 auto; line-height: 24px;color:#fff;}
#content {margin: 0px 0px 0px 220px; padding: 0px; width: 760px;}
</style>
<TITLE>Templatelite Theme Preview | Just another WordPress weblog</TITLE>
</HEAD>
<BODY>
<DIV id="base">
<DIV id="sidebar">
display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片<br>display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片<br>display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片<br>
<div class="copy">999888<br>888999</div>
</DIV>
<DIV id="content">
display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片</DIV>
</DIV>
</BODY></HTML>
------解决方案--------------------
.copy { position:absolute; bottom:0px;text-align:center;margin:0 auto; line-height: 24px;color:#fff;}
这句中的 position:absolute;bottom:0px;去掉,左边的内容就不会层叠了.因为 本来就是不同块的内容,根本没必要用绝对定位吧...另外 楼主说的右边和左边一起拉高,没听明白...
------解决方案--------------------
<DIV id="content">
display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片</DIV>
<div class="clear"></div> //添加这句
</DIV>
</BODY></HTML>
.clear {clear: 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 content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style type="text/css">
#base {margin: 0px auto; width: 990px;background:#ccc;display：block;}
#sidebar {padding: 0px; width: 170px; overflow: hidden; float: left; background:#666;position: relative;}
.copy { position:absolute; bottom:0px;text-align:center;margin:0 auto; line-height: 24px;color:#fff;}
#content {margin: 0px 0px 0px 220px; padding: 0px; width: 760px;}
</style>
<TITLE>Templatelite Theme Preview | Just another WordPress weblog</TITLE>
</HEAD>
<BODY>
<DIV id="base">
<DIV id="sidebar">
display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片<br>display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片<br>display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片<br>
<div class="copy">999888<br>888999</div>
</DIV>
<DIV id="content">
display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片</DIV>
</DIV>
</BODY></HTML>
------解决方案--------------------
.copy { position:absolute; bottom:0px;text-align:center;margin:0 auto; line-height: 24px;color:#fff;}
这句中的 position:absolute;bottom:0px;去掉,左边的内容就不会层叠了.因为 本来就是不同块的内容,根本没必要用绝对定位吧...另外 楼主说的右边和左边一起拉高,没听明白...
------解决方案--------------------
<DIV id="content">
display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签
a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片</DIV>
<div class="clear"></div> //添加这句
</DIV>
</BODY></HTML>
.clear {clear: left;} //再添加样式
不知道这是不是你想要的效果~
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
