css - 如何使 2 个 DIV 在 CSS 的列表项中垂直对齐？

Question

我正在开发一个评论系统，设计是我的弱项，到目前为止，虽然我已经非常接近我想要的外观，但我的代码如下。

我的 CSS 代码和我的 div 组成了评论部分，我去掉了所有花哨的东西，因为我只是遇到了 n 对齐问题，它出现在下面的代码中。

对于评论帖子，有 2 列，

左栏将有用户的照片和姓名等
右栏将有评论和日期以及一些管理内容

我的问题是我需要两列中的内容垂直对齐
现在左栏比右栏高 1 个方 block 空间

有人可以告诉我或帮助我将其对齐吗？

这张照片也显示了对齐问题，注意左边的照片与右边的文字不对齐
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

这是段落元素的默认边距 <p>那会给你带来麻烦。

只需添加:

div.commenttext p{margin:0;}

你会没事的。当然，如果您需要一些不同的东西，您可以调整边距。