Javascript 垂直排序div_Javascript_Jquery_Css

Javascript 垂直排序div

javascript jquery css

Javascript 垂直排序div,javascript,jquery,css,Javascript,Jquery,Css,我目前正在研究一种设计，它需要多个元素垂直排序，但同时保持其响应能力示例：宽幅布局更高的布局我使用了浮动、内联块显示，甚至还粗略地将其与jQuery组合在一起，但所有元素都是水平排序的环顾四周，我似乎找不到任何其他具有相同问题或解决方案的人，因此任何帮助都将是非常好的。您必须稍微修改一下html结构。为了做到这一点，您必须将子容器添加到主容器中，以“分组”您的内容。大概是这样的： // first example <div id="main"> <div

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

示例：

宽幅布局

更高的布局

我使用了浮动、内联块显示，甚至还粗略地将其与jQuery组合在一起，但所有元素都是水平排序的

环顾四周，我似乎找不到任何其他具有相同问题或解决方案的人，因此任何帮助都将是非常好的。

您必须稍微修改一下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>

//第一个示例
1.
2.
...
//第二个例子
1.
2.
3.
...

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

您必须稍微修改一下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>

//第一个示例
1.
2.
...
//第二个例子
1.
2.
3.
...

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

如果您不太关心跨浏览器支持（只是想在兼容/最新的浏览器中使其更美观），或者乐于使用某种JavaScript垫片来支持其他浏览器，您可以使用

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;
}

显然，为了演示的目的，我使用了

li

和

ul

元素，但是如果您愿意，这可以直接转移到

div

元素。只需按照与上述

ul

元素相同的方式设置父元素/容器的样式，并根据需要设置子元素的样式

参考资料：

如果您不太关心跨浏览器支持（只是想在兼容/最新的浏览器中使其更美观），或者很乐意使用某种JavaScript垫片来支持其他浏览器，您可以使用

column width