css absolute div under absolut div 同级

Question

我想显示一个评论列表以及每个评论的评论列表等等:

这是我的 HTML 代码:

<div class='comment'>
    <div class='titre'>Titre d'un commentaire statique</div>
    <div class='content'>
        Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto 
    </div>
    <div class='subComments'>
        <div class='comment'>
            <div class='titre'>Titre d'un sous commentaire statique</div>
            <div class='content'>
                Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius 
            </div>

        </div>
    </div>
</div>  


<div class='comment'>
    <div class='titre'>Titre d'un commentaire statique</div>
    <div class='content'>
        Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem viderncipem
    </div>      
</div>

这是我的 CSS:

.comment{
    //border: solid 1px blue;
    width: 580px;
    border-radius: 6px;
    position: absolute;
    padding-left: 50px; 
}

.titre{
    font-size: 1.2em;
    color: blue;
    padding: 12px;
}

.content{
    padding: 12px;
}

.subComments{
    border: solid 1px blue;
    width: 580px;
    border-radius: 6px;
    position: absolute;
}

这是我想要得到的:

这是我得到的:

现在我得到了叠加的两条评论!感谢您的帮助。

Answer 1

现在它将作为您的图像使用，我将边框更改为 border-top 并将 position:absolut 更改为 float:left

html

<div class='limit'>
<div class='comment'>
<div class='titre'>Titre d'un commentaire statique</div>
<div class='content'>
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis,     contempto 
</div>
<div class='subComments'>
<div class='comment'>
    <div class='titre'>Titre d'un sous commentaire statique</div>
    <div class='content'>
        Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius 
    </div>

</div>
</div>
 </div>  
<div class='comment'>
<div class='titre'>Titre d'un commentaire statique</div>
<div class='content'>
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem viderncipem
</div>      
</div>
</div>

CSS

<style>
.limit{
 margin:0 auto;
 width:650px;
 }
 .comment{
 //border: solid 1px blue;
 width: 580px;
 border-radius: 6px;
 float:left;
 padding-left: 50px; 
 }

 .titre{
font-size: 1.2em;
color: blue;
padding: 12px;
 }

 .content{
padding: 12px;
 }
.subComments{
border-top: solid 3px blue;
width: 580px;
float:left;
}
</style>