如何使用CSS做浮动顶部？ [英] How can I make a float top with CSS?

问题描述

我知道CSS只支持left和right的值为float属性，但有一个技术来实现浮动顶部？我会尽量解释。我有以下代码：

I know that CSS only supports left and right values for the float property, but is there a technique to implement a floating top? I will try to explain. I have the following code:

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

使用此代码，每个div都向左浮动，直到右边界的页面。我想做同样的事情，但垂直，所以每个div放置在上一个的底部，然后，当页面的下限到达，一个新的列创建。有没有办法这样做只使用CSS（也许编辑HTML代码）？

With this code every div is floated to left until the right limit of the page is reached. I want to do the same thing but vertically, so that every div is placed at the bottom of the previous one and then, when the bottom limit of the page is reached, a new column is created. Is there a way to do this using only CSS (and maybe editing the HTML code)?

推荐答案

CSS只是通过使用CSS 3，这将不工作在每个浏览器（只有最新一代，如FF 3.5，歌剧，Safari，Chrome）。

The only way to do this with CSS only is by using CSS 3 which is not going to work on every browser (only the latest generation like FF 3.5, Opera, Safari, Chrome).

CSS 3有这个awesome属性：column-count你可以这样使用：

Indeed with CSS 3 there's this awesome property : column-count that you can use like so :

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

如果#myContent包装其他div。

If #myContent is wrapping your other divs.

更多信息： http://www.quirksmode.org/ css / multicolumn.html

正如你可以看到的，在使用它时有严重的限制。在上面的示例中，如果内容溢出，它只会相加到另一列。
在mozilla中，您可以使用column-width属性，您可以根据需要将内容分为多个列。

As you can read there, there are serious limitations in using this. In the example above, it will only add up to one another column if the content overflows. in mozilla you can use the column-width property that allows you to divide the content in as many columns as needed.

否则您必须分发Javascript中或后端中的不同div之间的内容。

Otherwise you'll have to distribute the content between different divs in Javascript or in the backend.

这篇关于如何使用CSS做浮动顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！