【问题标题】:Implementing a multicolumn layout with independant row heights实现具有独立行高的多列布局
【发布时间】:2013-05-16 23:21:44
【问题描述】:

我正在尝试创建一个类似于新的 Google+ 布局和类似于this question(但使用 html)的布局。

目前,Google+ 每列使用 1 个 div。我正在尝试看看是否有其他方法可以做到这一点。

CSS3 的 flexbox 模型可能会有所帮助,但它的兼容性水平……嗯。

我尝试了 inline-block 模型,但这样做会创建不独立于彼此高度的行。

有现有的解决方案,但一切都需要 IE10+ 或 IE11+。我需要一个兼容 IE7+ 的解决方案。我在每列的 div 旁边看不到任何内容。

有没有人做过类似的事情?

【问题讨论】:

  • 你的意思是这样的吗:dev.w3.org/csswg/css-multicol
  • @blackbee 是的,这代表了我正在尝试做的更多事情。但它不兼容 IE7。
  • 如果您有特定的要求,他们需要在问题中。除非您愿意使用 JavaScript,否则您无法对旧的和损坏的浏览器做任何事情。
  • @cimmanon 点了,我已经编辑了问题。

标签: css html multiple-columns


【解决方案1】:

CSS 多列布局模块可以满足您的需求。

http://codepen.io/cimmanon/pen/CcGlE

.foo {
    columns: 30em; /* desired number of columns and/or width of column */
}

可能需要前缀。 http://caniuse.com/#feat=multicolumn

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-01-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-23
    • 2017-04-04
    • 1970-01-01
    • 2010-09-22
    相关资源
    最近更新 更多