请教高手:一个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;} //再添加样式
不知道这是不是你想要的效果~