Question

所以我需要对齐列，在父类内部具有设置宽度的div具有屏幕大小的最大高度。

所以，例如：

[div]
[div]
[div]
[div]

将是最大高度，但如果我们去额外的div，它需要这样做：

[div][new_div]
[div]
[div]
[div]

等等。因此，一旦它达到最大高度（屏幕大小或其他），div需要自动切换并对齐到右上角。

总结：

最多2列，填充了彼此堆叠的数据[一个接一个地，真实地]。一旦达到最大宽度[屏幕大小]，我需要它自动创建一个新列来保存新行。

Answer 1

嗯......这太棘手了。您可以使用CSS3 columns来解决此问题，但据我所知，IE中不支持它们。

由于您说<div>有一个设定的宽度，您可以将该宽度设为列的宽度。然后当<div>s的堆栈填满分配的垂直空间时，它们应该溢出到新列中。

Answer 2

以下是working demo使用权限float: right，然后是transform: rotate来模拟向上/向下浮动。通过一些工作，您可以在所有主流浏览器中使用它，您只需为不同的平台应用不同的旋转过滤器。

生成的代码可能有点令人困惑，因为宽度变为高度，反之亦然，但它可能仍然是比使用javascript移动div更好的解决方案。

    <html>
    <head>
     <style type="text/css">
      #outer {
       width: 500px;
       margin: 300px 0 0 -200px;
       -webkit-transform: rotate(-90deg);
      }
      .inner {
       background-color: red;
       width: 100px;
       height: 100px;
       float: right;
       margin: 10px;
       -webkit-transform: rotate(90deg);
      }
     </style>
    </head>

    <body>
     <div id="outer">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
      <div class="inner">4</div>
      <div class="inner">5</div>
      <div class="inner">6</div>
      <div class="inner">7</div>
     </div>
    </body>
    </html>

具有最大高度父级的自动列div

2 个答案: