我正在尝试在容器中从上到下垂直定位DIV。容器应垂直限制500像素。所有不符合此限制的DIV应该浮动到下一行。
<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="area1">area1</div>
<div id="area2">area2</div>
<div id="area3">area3</div>
<div id="area4">area4</div>
<div id="area5">area5</div>
<div id="area6">area6</div>
</div>
我的计划结果应该是这样的:
---------------------------->
| -------- --------
| |Area 1| |Area 5|
| -------- --------
| -------- --------
max | |Area 2| |Area 6|
500 | -------- --------
px | --------
| |Area 3| etc..
| --------
| -------- /\
| |Area 4| etc....... |
| --------
--------------------------->
我的问题是:我做错了什么,是否有可能实施?谢谢!
起初,CSS列似乎是一个很有前途的解决方案,但是当添加或删除区域时,它们不会自动调整容器的宽度。
我的建议是对div进行布局,就好像您是将它们从右向左水平而不是垂直堆叠一样。这很容易用float:right
实现。一旦有了它,就可以将整个容器旋转90度以获得等效的垂直布局。但是,由于区域div现在都将被错误地定向,因此您还需要将这些div沿相反的方向旋转回90度。
类似这样的东西:
#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
,它会在旋转后调整位置-需要与容器的“高度”相匹配(即max-width
属性)。 max-height
属性表示容器在被裁剪之前将达到的最大“宽度”。需要overflow:hidden
来强制容器增长以包含其浮动子元素。
另外,由于区域div现在是浮动的,因此它们之间的边距不会折叠。一种解决方法是将边距限制为仅两侧(我用过右边和底部),然后通过在容器上填充box-sizing:border-box
来模拟另一边的边距。
最后,在此特定示例中,区域div的纵横比为1:1,这意味着我们不必担心在旋转后重新放置它们。如果宽度和高度不同,事情就会变得稍微复杂一些。
此解决方案不适用于旧版本的IE,但至少支持IE9。
您可以使用CSS列like in this jsfiddle demo,使用以下CSS来做到这一点
#container{
position: relative;
background-color: red;
max-width: 500px;
min-height: 500px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-column-width: 150px;
-webkit-column-width: 150px;
-o-column-width: 150px;
column-width: 150px;
}
#area{
background-color: yellow;
display: inline-block;
font: italic 45px/215px georgia;
height: 215px;
margin-bottom: 21px;
text-align: center;
width: 215px;
}
演示中的尺寸已按比例缩小以适应较小的渲染帧尺寸。
当然,这并不奇怪,在低于版本10的IE版本中将不起作用。您可以使用techniques from following ALA page使它在IE中运行。
#container {
background-color: red;
max-width: 330px;
max-height: 300px;
padding: 20px;
overflow:auto;
}
.area {
background-color: yellow;
display: inline-block;
height: 70px;
margin-bottom: 21px;
text-align: center;
width: 70px;
}
.x {
background-color: cyan;
height: 30px;
width: 90px;
}
.Z {
background-color: grey;
height: 300px;
width: 190px;
}
<div id="container">
<div class="area">area1</div>
<div class="area">area2</div>
<div class="area x">area3</div>
<div class="area">area4</div>
<div class="area x">area5</div>
<div class="area Z">area6</div>
</div>