2

我目前正在研究一种需要多个<DIV>元素垂直排序但同时保持其响应能力的设计。

例子：

更广泛的布局

更广泛的布局

更高的布局

更高的布局

我使用了浮点数、内联块显示，甚至粗暴地将其与 jQuery 放在一起，但所有元素都是水平排序的。

环顾四周，我似乎找不到任何其他有相同问题或解决方案的人，所以任何帮助都会很棒。

4

2 回答 2

4

如果您不太关心跨浏览器支持（只想让它在兼容/最新的浏览器中更漂亮），或者很乐意使用某种 JavaScript shim 来启用其他支持浏览器，您可以使用column-width定义列的宽度，然后允许浏览器重排这些列以容纳内容：

.gridbox {
    display: block;
    -webkit-column-width: 4em;
    -moz-column-width: 4em;
    -o-column-width: 4em;
    -ms-column-width: 4em;
    column-width: 4em;
    /* aesthetics, adjust to taste,
       only the above is important */
    margin: 1em auto;
    padding: 1em;
    border: 1px solid #f90;
    border-radius: 1em;
}

JS 小提琴演示。

很明显，我在演示中使用了li和元素，但如果您愿意，这可以直接转移到元素上。只需以与上述元素相同的方式设置父/容器的样式，并根据需要设置子元素的样式。uldivul

参考：

于 2012-10-21T12:58:44.177 回答
0

您必须稍微修改您的 html 结构。为此，您必须在主容器中添加子容器，以便“分组”您的内容。像这样的东西：

// first example
<div id="main">
  <div class="group2">
    <span>1</span>
    <span>2</span>
  </div>
  ...
</div>

// second example
<div id="main">
  <div class="group3">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  ...
</div>

使用 css 限制组容器的宽度，您可能会得到想要的效果。

于 2012-10-21T11:43:14.520 回答