首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将各种形状的div一起浮动成行

将各种形状的div一起浮动成行
EN

Stack Overflow用户
提问于 2011-05-13 16:18:05
回答 3查看 221关注 0票数 1

我有一个很大的元素,里面大约有10个DIVs -大多数元素的宽度平均约为300 to,并且都设置为向左浮动。最终结果是一个小部件/网格类型布局。然而,这种样式是专门根据响应性设计构建的--我们使用媒体查询来根据设备调整大小和列数。

问题是,我们可能有一个或两个盒子是双宽或双高。双宽并不能真正引起浮起问题(反正我也解决不了),但问题是双高。双高将扩展到下一行,但防止其他框在其左侧浮动。右浮动不是一种选择,因为高盒子不可能总是在右边。

我试图找到一种方法来动态地找出每个块可以浮动到哪里,比如解决一个谜题。我看过一些javascripts,如砖石、jLayout等,但它们要么无法工作,要么无法解决不规则框的问题。

所以:

  1. 我想避免绝对定位任何东西,因为我们每次都要重新定位,因为每个元素都不会流动。
  2. ,我需要允许双宽和双高,但它们可能并不总是存在,最终用户应该能够确定他们的位置,所以我们不能总是根据已知的位置编写javascript。
  3. ,我尝试过通过jQuery移动元素,这是可行的,但必须通过窗口调整。当您在需要三列到四列的宽度上转换时,这会导致元素来回闪烁。使用
  4. 的css3列将不能工作,因为DIVs被当作文本处理,在传递到下一列时被分解为两个,这也不允许双宽的。

有人有什么想法或建议吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-05-17 15:38:21

我仍然没有找到任何真正的方法来处理这种情况。现在,我刚刚编写了一些定制的javascript,以便在页面调整大小时交换几个DIVs。

票数 0
EN

Stack Overflow用户

发布于 2011-06-29 12:05:57

使用Jquery砖石或同位素,它会将所有容器排列成最节省空间的安排(或者,如果您使用同位素,您可以修改它来排列其他形式的排列)。

票数 1
EN

Stack Overflow用户

发布于 2011-05-13 16:55:28

如果您不太关心元素的顺序,那么一个简单的解决方案是:

  1. 将项添加到#main中,以便首先添加所有.tall小部件。right.
  2. Likewise,中的.tall小部件要确保所有.wide小部件都是最后添加的,并将这些小部件浮动到左边。

它在这种情况下是可行的,我认为它将为这些元素中的任何一组提供空间的最佳使用。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5994831

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档