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

Question

因此，我需要将列对齐，将div的宽度设置为在父屏幕中具有固定宽度的div，该父屏幕的最大高度为screensize。

因此，例如：

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

将是最大高度，但是如果我们再加一个div，则需要这样做：

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

等等。 因此，一旦达到（屏幕尺寸或其他尺寸的）最大高度，divs就需要自动在其上方对齐并与右上角对齐。

综上所述：

最多2列，填充有彼此堆叠的数据[彼此垂直堆叠]。 一旦达到最大宽度[即屏幕尺寸]，我需要它自动创建一个新列以容纳新行。

Answer 1

嗯...那很棘手。 尽管据我所知，IE中不支持它们，但您也许可以使用CSS3列实现这一目标。

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

Answer 2

这是一个使用right float: right的工作演示，然后进行transform: rotate以模拟上/下浮动。 通过一些工作，您可以使它在所有主流浏览器中都可以工作，您只需要为不同的平台应用不同的旋转过滤器即可。

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

    <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 个解决方案

解决方案1
1 已采纳 2011-11-09 16:25:50

解决方案2
0 2011-11-09 19:03:22

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-11-09 16:25:50

解决方案2 0 2011-11-09 19:03:22

解决方案1
1 已采纳 2011-11-09 16:25:50

解决方案2
0 2011-11-09 19:03:22