太多的文字打破我的花车

Question

我正在使用无序列表创建搜索结果列表，每个<li>由3个部分组成（浮点数）：

http://jsfiddle.net/danmofo/fYMrL/4/

我的问题是，每当<p>内的文本超出列的宽度时，浮动会向下级联页面，从而打破布局。

这是一个漫长的一天所以可能一个小错误某处，但我看不到它。

当文本级联时我尝试过的事情：

• 使所有元素内联
• 定义特定宽度

感谢任何帮助，特别是链接到文章/有关它的一些信息，谢谢。

Answer 1

为浮动元素赋予宽度，否则浮动将无法预测。

像

这样的东西

div.left-side{
    float: left;
    width:40%;
}

div.right-side{
    float:right;
    width:20%;
}

Answer 2

我认为问题在于p下的div。它是一个想要占用整行的块元素。将样式设置为此div的“display：inline”。