css - 如何在 CSS 中将此 DIV 放置在其他 DIV 中？

Question

我无法在评论系统上对齐某些 DIV。下面是我当前的 CSS 代码和 html 以及显示问题的照片。

在照片中，第一条评论右侧的删除部分位于评论的底部，我需要这个 div 位于顶部。此外，如果您查看第二条评论，您会看到删除文本甚至不在右侧，而是在第一个 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

• 将 vertical-align: top; 添加到您的每个 div。

• 将那些 float: right 更改为 float: left

• 添加 text-align: right 使 div 的内容右对齐。

此外，还有一个新的 StackOverflow 附属网站，用于 HTML/CSS/网页设计 http://doctype.com/