javascript - 如何在一个中浮动div但仍然堆叠垂直条目？

Question

我有一个<ul>每个地方<li>都有 2 个 div。我希望 div 彼此相邻浮动，但仍然<li>垂直堆叠 s 。我的问题是我所有的 div 都是浮动的，而不是每个<li>都低于前一个。我需要在这里做哪些风格改变？

谢谢！

// Add the message to the page. 
$('#conversation').append('<li><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');

我的风格：

#conversation >li > div > div {
    float: left;
}
.legend {
    font-size: 20px;
}
.chat-text {
    padding-left: 20px;
}

有了答案，我现在得到了我想要的。

Answer 1

你有一个clearfix问题。

将此添加到您的样式中，但您很可能需要将其设为 CSS 类，以便它不适用于所有li标签：

li{
    overflow: auto;
}

工作示例 http://jsfiddle.net/6J8SU/

要添加类更改您的脚本：

$('#conversation').append('<li class="row"><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>'
            + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');

然后添加这个样式：

.row{
    overflow: auto;
}

类 http://jsfiddle.net/6J8SU/1/的示例