三个 div,一个 div 的内容转到另一个 div
我需要创建三个彼此相邻的 div(属性 float:left)。 然后我从数据库中读取数据,我需要将这些数据呈现在三个div中,这样我首先逐行填充第一个div,当我达到一定高度时,我转到下一个div并填充它与数据,等等。 这类似于反向表,也就是说,我首先填充第一行的第一列,然后转到第二列,依此类推,直到行尾,然后移到第一行的第二列 等等。我希望你能明白这张照片。
有没有办法用 CSS 或其他方式实现这一点?
I need to create three divs, next to each other (attribute float:left).
Then I read the data from database and I need to present this data in three divs, in such a way that I first fill up the first div, line by line and when I reach certain height, I go to the next div and fill it with data, and so on.
This is something like reverse table, that is I first fill the first column in first row then go to second and so on until the end of the row, then I move to the second column of first row
and so on. I hope you get the picture.
Is there a way to achieve this in CSS or in some other way?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
CSS3 中使用
column-count
和column- 提供此功能跨度
。This functionality is available in CSS3 using
column-count
andcolumn-span
.我不知道如何提高效率,但用javascript应该可以...你知道行高,检查第一个div的所有内容的高度,然后将其截断为所需的大小,其余的放入下一个div..重复..但这看起来很奇怪..?
I do not know how to make it efficient, but it should be possible with javascript... you know the line-height, you check the height of first div with all content, then you truncate it to desired size and the rest put to the next div.. repeat.. but this looks odd.. ?
您可以通过在一列中请求数据库中的前 30 个结果,然后在下一个 div 中请求接下来的 30 个结果,依此类推来完成此操作。我认为仅在 CSS 2.1 中这是不可能的。
You might be able to do this by requesting the first 30 results in the database in one column, then request the next 30 in the next div, and so on. I can't see it being possible in CSS 2.1 alone.