DIV垂直浮动DIV从上到下按行排列 [英] DIV Vertically floating DIV arrange from up to down by rows
问题描述
我尝试在容器内从上往下垂直放置DIV。容器应该在垂直方向上限制为500像素。不适合此限制的所有DIV都应悬浮在下一行。
I am trying to locate DIVs vertically from up to down inside container. Container should be limited vertically by 500px. All DIVs that couldn't fit in this limit should be floated to next row.
<style>
#container {
position:relative;
background-color:red;
max-width:500px;
min-height:500px;
}
#area {
position:absolute;
bottom: 0;
background-color:yellow;
margin:20px;
width:100px;
height:100px;
}
</style>
<div id="container">
<div id="area">area1</div>
<div id="area">area2</div>
<div id="area">area3</div>
<div id="area">area4</div>
<div id="area">area5</div>
<div id="area">area6</div>
</div>
我的飞行结果应该是这样：
My planing result should be like this:
---------------------------->
| -------- --------
| |Area 1| |Area 5|
| -------- --------
| -------- --------
max | |Area 2| |Area 6|
500 | -------- --------
px | --------
| |Area 3| etc..
| --------
| -------- /\
| |Area 4| etc....... |
| --------
--------------------------->
我的问题是：我做错了什么，如果可以实现？谢谢！
My questions is: What do I do wrong and if it is possible to implement? Thank you!
推荐答案
CSS列首先是一个很有前景的解决方案，但它们不会自动调整容器的宽度
CSS columns seem like a promising solution at first, but they won't automatically adjust the width of the container as areas are added or removed.
我的建议是布局divs，就好像你是从左到右堆叠水平而不是垂直的。这很容易实现 float：right 。一旦你有了，你可以旋转整个容器90度，以获得等效的垂直布局。但由于区域divs现在都不正确，您还需要将它们向相反方向旋转90度。
My suggestion is to lay out the divs as if you were stacking them horizontally rather than vertically, going from right to left. That is easy enough to achieve with float:right. Once you have that, you can rotate the whole container 90 degrees to get the equivalent vertical layout. But since the area divs will now all be incorrectly oriented, you'll also need to rotate those 90 degrees back in the opposite direction.
这样的东西：
#container {
position:relative;
background-color:red;
max-width:500px;
margin-left:-500px;
max-height:500px;
overflow:hidden;
-webkit-transform:rotate(-90deg);
-webkit-transform-origin:top right;
-ms-transform:rotate(-90deg);
-ms-transform-origin:top right;
transform:rotate(-90deg);
transform-origin:top right;
padding:20px 0 0 20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#area {
background-color:yellow;
margin:0 20px 20px 0;
width:100px;
height:100px;
float:right;
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
请注意容器上的负数 margin-left 它调整旋转后的位置 - 需要匹配容器height（即 max-width 属性）。 max-height 属性表示容器在裁剪之前达到的最大宽度。需要 overflow：hidden 来强制容器增长以包含其浮动子元素。
Note the negative margin-left on the container, which adjusts the position after rotation - that needs to match the container "height" (i.e. the max-width property). The max-height property represents the maximum "width" that the container will reach before being clipped. The overflow:hidden is needed to force the container to grow to contain its floating child elements.
因为区域div现在是浮动的，它们之间的边缘不会崩溃。一种解决方法是将边距限制为只有两边（我使用右边和底部），然后通过使用 box-sizing：border-size调整容器上的填充来模拟其他边的边距。框。
Also, note that because the area divs are now floated, the margins between them won't collapse. One way of solving that is to restrict the margins to only two sides (I've used right and bottom) and then emulate the margins for the other sides via padding on the container with box-sizing:border-box.
最后，在这个特定的例子中，区域div具有1：1的宽高比，这意味着我们不必担心关于在旋转之后重新定位它们。
Finally, in this particular example the area divs have a 1:1 aspect ratio, which means we don't have to worry about repositioning them after the rotation. Things become slightly more complicated if their width and height are different.
这个解决方案不适用于旧版本的IE，但至少支持IE9。
This solution won't work on older versions of IE, but it at least supports IE9.
这篇关于DIV垂直浮动DIV从上到下按行排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
