1

私は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/

アライメントがめちゃくちゃになっていることがわかります。

3 番目の div ( .myForum > .myrow > .mycount )に追加の padding-topを追加すると、配置は問題なく機能します。しかし、それは縦線を乱します（2番目の縦線）。以下の変更されたものを見ることができます

http://jsfiddle.net/ytAud/2/

(表を使おうと思ったのですが、最近のサイトではリスティングでもDIVを使い始めているようです)

4

2 に答える 2

1

これは構文的に最も正しい方法ではないかもしれませんが、あなたの例では機能します:

.myForum > .myrow {
クリア: 両方;
}

于 2012-11-13T21:56:27.640 に答える
1

写真のパディングが問題を引き起こしているようです。各行に十分な高さがないため、次の行に重なります。問題を示す簡単な例。（パディングを削除するか、高さを追加することで解決できます）

変化する：

.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;
}

例

于 2012-11-13T21:57:29.093 に答える