我正在使用DIV构建论坛列表,这是我拥有的论坛列表
/* forum like build */
.myForum{
float: left;
width: 620px;
margin-top: 10px;
border: 2px solid #0F5C8E;
padding: 1px;
overflow: hidden;
display: block;
}
.myForum > .header {
height:10px;
background-color: #adcbe7;
border-bottom: 1px solid #0F5C8E;
font-weight: bold;
padding: 2px;
overflow: hidden;
height:20px;
}
.myForum > .myrow {
padding-left: 0px;
margin: 0px;
border-bottom: 1px solid #0F5C8E;
height:57px;
background-color: #f5f5f5;
}
.myForum > .myrow > .photo {
overflow: hidden;
width:105px;
float:left;
text-align:center;
padding-right: 2px;
padding-top:2px;
height:57px;
}
.myForum > .myrow > .content {
padding-left: 3px;
padding-right: 3px;
overflow: hidden;
width:450px;
float:left;
border-left: 1px solid #0F5C8E;
border-right: 1px solid #0F5C8E;
height:57px;
}
.myForum > .myrow > .mycount {
padding-right: 1px;
padding-bottom: 1px;
overflow: hidden;
float:left;
height:57px;
padding-left:3px;
}
.myForum > .myrow > .content > a {
color: #013E99;
font: bold 0.8em/1.3 arial,helvetica,sans-serif;
margin-top: 0;
}
.myForum > .myrow > .content > p {
font: normal 0.7em/1.3 arial,helvetica,sans-serif;
margin-bottom:2px;
color:#878787;
}
.myForum > .myrow > .content > p > a {
color: #0066CC;
margin-top: 0;
}
http://jsfiddle.net/ytAud/1/
你可以看到对齐被搞砸了.
如果我在第三个div(.myForum> .myrow> .mycount)中添加额外的填充顶部,对齐效果很好。但这会干扰垂直线(第二条垂直线)。您可以在下面看到修改后的那个
http://jsfiddle.net/ytAud/2/
(我想过使用表格,但我看到最新的网站甚至开始使用 DIV)
看起来照片上的填充导致了问题。由于每一行都没有足够的高度,因此它会过度进入下一行。显示问题的简单示例。(可以通过删除填充或增加更多高度来解决)
改变:
.myForum > .myrow > .photo {
overflow: hidden;
width:105px;
float:left;
text-align:center;
padding-right: 2px;
padding-top:2px;
height:57px;
}
自
.myForum > .myrow > .photo {
overflow: hidden;
width:105px;
float:left;
text-align:center;
height:57px;
}
例
这可能不是语法上最正确的方法,但它适用于您的示例:
.myForum> .myrow {
明确:两者兼而有之;
}