このDIVをCSSの他のDIVに配置するにはどうすればよいですか？

Question

私は、コメントシステム上でいくつかのDIVの整列に問題があります。以下は私の現在のCSSコードとhtmlと一緒に問題を示す写真です。

写真の最初のコメントの右側にある削除部分はコメントの下部に配置されています。このdivが上部になるようにする必要があります。また、2番目のコメントを見ると、削除テキストが右側にもないことがわかります。最初のdivの下にあります。

誰かが正しく配置するのを助けることができますか？

alt text http://img2.pict.com/91/04/e8/1487396/0/800/screenshot2b17.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 0px 10px 0px; 
    width: 950px; 

} 
div.commenttext p{margin:0;} 
/* Makes even number comments have a different background color */ 
ol.commentlist li.thread-even { 
    background:#f6f6f6; 
    border-top:1px solid #e3e3e3; 
    border-bottom:1px solid #e3e3e3; 
} 
/* Left column with teh comment posters info and photo */ 
ol.commentlist li div.photocolumn { 
    display: block; 
    float: left; 
    width: 120px; 
    padding: 0px 0px 0px 15px; 
} 
/* Center column with the comment data */ 
ol.commentlist li div.commentcolumn { 
    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; 
} 
/* Right side cloumn with moderation links */ 
ol.commentlist li div.modcolumn { 
    display: block; 
    float: right; 
    width: 50px; 
    padding: 0px 0px 0px 0px; 
} 
</style> 

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

     <!-- CENTER column of the comment -->  
     <div class="commentcolumn"> 
      <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 --> 

     <!-- Far right moderation column --> 
     <div class="modcolumn"> 
      Delete 
     </div> <!-- END moderation --> 
    </li> 
</ol> 

Answer 1

• 垂直整列を追加：トップと、それぞれのdivにを追加してください。

• の変更は、それらのフロート：右秒フロートへ：div要素の内容は右揃えるために取得する権利：テキスト整列を追加

• を残しました。

はまた、すべてが完璧に働いたこと、http://doctype.com/