Wie kann ich 2 DIVs in einem Listenelement in CSS vertikal ausrichten?

Question

Ich arbeite an einem Kommentar-System und Design ist mein schwacher Bereich, so weit, obwohl ich sehr nah an dem Look bin, den ich anstrebe, ist mein Code unten.

Da sind mein CSS-Code und meine divs, die den Kommentarabschnitt ausmachen, ich habe alle ausgefallenen Sachen entfernt, da ich gerade ein n-Ausrichtungsproblem habe und es im folgenden Code vorhanden ist.

Für den Kommentar Beitrag 2 Spalten besteht,

linke Spalte wird ein Benutzer Foto und Namen und Sachen
rechte Spalte

Mein Problem ist, den Kommentar haben und das Datum und die einige Admin-Sachen haben dass ich die Inhalte in beiden Spalten vertikal ausrichten muss auch
jetzt die linke Spalte ist wie 1 Block Platz höher als die rechte Spalte

Kann jemand bitte mir zeigen oder mir helfen, es gleich ausrichten? Hier

ist ein phot auch die Ausrichtung Problem zu zeigen, dass das Foto auf der linken Seite nicht mit dem Text auf der rechten Seite nicht ausrichten
alt text http://img2.pict.com/4e/fe/9b/1486749/0/screenshot2b16.png

<style type="text/css"> 
ol.commentlist { 
    margin-right:auto; 
    margin-left:auto; 
    padding: 0; 
    list-style-type: none; 
    width: 950px; 
} 
ol.commentlist li { 
    float: left; 
    margin: 0; 
    padding: 10px 10px 10px 10px; 
    width: 950px; 

} 

ol.commentlist li div.photocolumn { 
    display: block; 
    float: left; 
    width: 120px; 
} 
ol.commentlist li div.commenttext { 
    position: relative; 
    float: right; 
    margin: 0 0 15px 0; 
    padding: 0 80px 0 30px; 
    min-height: 53px; 
    width: 700px; 
    border-left: 1px solid #dfe5e7; 
    overflow: hidden; 
} 
</style> 



<ol class="commentlist"> 
    <li> 
     <!-- left column of the comment for user photo --> 
     <div class="photocolumn"> 
       A photo goes here 
     </div><!-- END left column --> 

     <!-- RIGHT column of the comment -->  
     <div class="commenttext"> 
      <p>02/12/3009</p> 
      <p>Being new to web design, I use to have those same bad habits of starting things directly into photoshop!</p> 
     </div> <!-- END right comment column --> 
    </li> 
</ol> 

Answer 1

Es sind die Standardränder für das Absatzelement <p>, die Probleme verursachen.

Fügen Sie einfach:

div.commenttext p{margin:0;} 

Und Sie werden in Ordnung sein. Natürlich können Sie die Ränder optimieren, wenn Sie etwas anderes brauchen.

Answer 2

Wie Sie sehen können, ist die tatsächliche DIV des tun Line-Up (der Rand des Text Div ist in der Zeile mit dem oberen Rand des Fotos. Das Problem ist mit dem Text selbst. Ich empfehle mit FireBug() zu prüfen, die CSS - Sie können Elemente markieren und sehen ihre tatsächlichen Bounding-Boxen und Ränder auf dem Bildschirm

Answer 3

Das CSS ist in Ordnung. Es ist das <p> Tag. Versuchen Sie, <br> zu verwenden, um Zeilen stattdessen zu brechen.