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

为每个div添加 vertical-align：top; 。
将 float：right 更改为 float：left
添加 text-align：right 以使div的内容对齐。

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

的HTML / CSS /网页设计

如何将这个DIV放在CSS中的其他DIV中？

1 个答案: