Question

关于网页布局的问题，有背景图片的时候总是与上面的div有很大距离

网页是三列，外面的属性是content，因为高是自动，所以里面有overflow:hidden;这个属性撑开整个高度。
三列分别是left，middle，right
right里面有上下两块，上面是list，下面是post，post里面有一个背景图片，所以设置了高度，但post总是和list中间差很大距离，不知道这个距离从哪里来？
我将背景图片删掉，随便在里面打了几个字，比如“今天的新闻”预览的时候就变成两行
上面是“今天的新闻”下面是“天的新闻”？（这一次post没有和上面list有很大距离，正常显示）
为什么会出现这种现象呢？
下面是这几个重要块的css
.content {
margin-top:10px;
height: auto;
overflow:hidden;
}
.content .left {
float: left;
width: 211px;
}
.content .middle {
width: 582px;
float: left;
margin-left: 10px;
}
.content .right {
float: left;
width: 197px;
}
.list {
text-align: center;
background-color: #f1f1f1;
}
.list li {
font-size: 13px;
font-weight: bold;
line-height: 32px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
width: 160px;
}
.post {
width: 197px;
margin-top: 10px;
}
预览是使用IE 6.0，其他的浏览器还没测试

Answer 1

因为你定义了post的上边距为10像素：
.post {
width: 197px;
margin-top: 10px;
}
把margin-top: 10px;去掉看看。

追问

没有用，差挺多呢

追答

把HTML代码贴出来看看

追问

贴到哪都显示超出限制？

追答

有网址吗

追问

还没上传呢，方便把QQ在hi里给我发过来吗？

追答

就用hi吧

Answer 2

line-height: 32px;
规定了行高，并且太高，一般是24px或20左右
所以随便在里面打了几个字，比如“今天的新闻”预览的时候就变成两行
.content {
margin-top:10px;
height: auto;
overflow:hidden;
}
里面的margin-top:10px;去掉，要实现这个可以在应用此项的div里单独定义
让后是
.list {
text-align: center;
background-color: #f1f1f1;
margin:0px;
padding:0px;
border:0px;
}
.post {
width: 197px;
margin-top: 10px;
margin:0px;
padding:0px;
border:0px;
}
然后就可以了啊，你试试，不行再追问，说下效果

追问

我都试了，还是原来的样子呢？为什么会出现两行字呢？我打6个字的时候是重复三个，5个字是重复4个？

追答

由于看不到你网页的全部代码，我建议你新建一个页，一项一项的做实验，总会解决的，你可以加QQ1491015823

Answer 3

.post {
width: 197px;
margin-top: 10px;
}

margin-top: 10px; 这个缘故，以后直接发代码全部放出来，看起来会方便点。。。

Answer 4

你的li是用ul还是ol啊
把ul或者ol定义一下
margin:0px;
试试

Answer 5

li的问题 试着给li高度！~