列表的浮动或格式问题：当上面的元素包含多行时，具有浮动样式的列表项不会清除到左侧
我们发现列表存在奇怪的浮动或格式问题。
我们水平显示列表元素，而不是默认的垂直显示，三到一行。每个列表元素通常只包含一行文本。
但是，当项目上方的行包含两行文本时，格式会变得很奇怪，并且列表项不再一致对齐。例如，应该出现在第一列中的元素却出现在第三列中。
重现：
1）转到此处：http://www.panabee.com/domain -name-generator/healthy%20food
2) 滚动到名为维基百科相关术语的底部部分。
3）PayPal 1000美元。只是在开玩笑。 :) 查找文本达斯蒂·多诺万。这应该清除上面的所有浮动并在第一列中对齐。相反，它在第三列中对齐。 Boosterth Fun Run 也会发生这种情况。
我们如何解决这种格式或浮动问题？
谢谢！
We are seeing a weird float or formatting issue with lists.
We display list elements horizontally, vs the default of vertically, three to one row. Each list element usu only contains one line of text.
However, when the row above an item contains two lines of text, the formatting gets weird and the list items don't all align consistently anymore. For instance, an element that should appear in the first column instead appears in the third column.
To reproduce:
1) Go here: http://www.panabee.com/domain-name-generator/healthy%20food
2) Scroll to the bottom section called Wikipedia Related Terms.
3) PayPal us $1000. Just kidding. :) Look for the text Dusty Donovan. This should clear all floats above and line up in the first column. Instead it's aligned in the third column. This also happens for Boosterthon Fun Run.
How do we remedy this formatting or float issue?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
Crashalot，这不是 CSS bug，而是浮动的工作方式，较高的浮动意味着下一个“行”上的某些内容不能比它更向左浮动，您需要的是 CSS3 "multi-columns" ，正如您可能已经猜到的那样，尚未完全支持，那里是帮助完成同样事情的脚本，我相信某些浏览器确实支持
浮动始终只是一种黑客方式 - 它可以用内联块而不是浮动来完成，但每当您仍然会得到“不均匀的间距/垂直边距”有两个行项目，但至少列之间的项目仍然均匀分布，并且通过使用内联块可以实现的垂直对齐，额外的间距可以均匀分布。
示例如下：在 JSBin 中
Crashalot, it's not a CSS bug it's the way floats work, the taller float means that something on the next 'row' can't float further left than it, what you would be looking for is CSS3 "multi-columns" , which as you've probably guessed is not fully supported yet, there are scripts which help accomplish the same thing, and I believe some browsers do have support
floats were always just a hacky way - it can be done somewhat similarly with inline-blocks instead of floats, you still get "uneven spacing/vertical margins" whenever there's a two line item, but at least there's still an even distribution of items between columns and with the vertical-alignment you can achieve with inline-blocks, the extra spacing can be evenly distributed.
example here: in JSBin
如果您的标记是动态生成的，您可以执行以下操作。此示例适用于 4 列，并使用 PHP。
$i = 0当您循环遍历项目时（显然每次都会增加 1）。col-，即$i模 4 表示列号。所以你会得到类似的东西：（
当然，这也可以在手动编码的标记中轻松完成。）
然后添加以下 CSS（假设你已经为所有
li< 设置了浮动和宽度/code> elements):看起来效果很好！
If your markup is dynamically generated, you can do the following. This example is for 4 columns, and uses PHP.
$i = 0as you loop through your items (obviously incrementing by one each time).col-<?php echo $i % 4; ?>, i.e.$imodulus 4 for the column number.So you'll get something like:
(Of course, this can be done easily in manually coded markup, too.)
Then add the following CSS (assuming you've already got the floating and width set up for all
lielements):Seems to work well!
您可以做的一件事是在 li 元素上设置显式高度，然后强制溢出可见。
这不是最优雅的解决方案，但如果您没有其他选择，那么这是一种解决方法。
One thing you could do, is to set an explicit height on the li elements, then force overflow to be visible.
Not the most elegant of solutions, but a workaround if you have no other option.
这是预期的行为，之前的元素有 2 条线并且扭曲了浮动。如果您不关心 ie6，请查看此小提琴 http://jsfiddle.net/kuyabiye/9YFzW/
如果你关心 ie6，唯一的方法似乎是设置等高或使用等高 javascript 解决方案或组织标记捆绑 3 列，如下所示
It is an expected behavior, the element before that has 2 lines and distorting the floats. If you don't care about ie6 check out this fiddle http://jsfiddle.net/kuyabiye/9YFzW/
If you care about ie6, the only way seems to set equal heights or using a equal height javascript solution or organizing the markup bundling 3 columns like below