首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

:一个DIV布局小疑点

2012-09-10 
请教高手:一个DIV布局小问题左边的层重叠了。右边的灰色区域没有自动和左边一起拉高。错在何处呢?代码如下:

请教高手:一个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;} //再添加样式

不知道这是不是你想要的效果~

热点排行