我安排多个盒子(div的)使用浮动两列:留给他们。的div有不同的高度,从而在这样的布局:
I arrange multiple boxes (divs) in two columns using float:left for all of them. The divs have different heights, resulting in a layout like this:
AAA BBB
AAA BBB
AAA
AAA CCC
CCC
CCC
CCC
但我想定义一个最小高度(最小可用空间),当一箱必须浮在左边的列。我想类似这样的结果是:
But I want to define a minimal height (minimum available space), when a box must float in the left column. I want a result similar to this:
AAA BBB
AAA BBB
AAA
AAA
CCC
CCC
CCC
CCC
我想这是不可能的......但是,无论也许有一个CSS把戏?
I suppose that is not possible ... but however maybe there is a css trick?
谢谢,康拉德
使用上面,有一个大的负利润率控制浮动对准清除元素浮动元素。浏览器应该增加一个清除元素的上边界,以便它清除浮动。因此,大规模的顶部切缘阴性是由浏览器重新计算,这样的元素只是清除浮动:
Use a floated element above a cleared element that has a large negative margin to control the float alignment. The browser should increase the top margin of a cleared element so that it clears the float. Therefore the massive top negative margin is recomputed by the browsers so that the element just clears the float:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Items Divided in Ordered Columns</title>
<style type="text/css">
#columnlist {
margin:auto;
width:80%;
font:75%/1.5 arial;
}
#columnlist h1 {
float:left;
width:100%;
font-size:167%;
}
#columnlist ul {
margin:0;
padding:0;
}
#columnlist li {
list-style:none;
width:33%;
}
#columnlist .col1 {
color:#c00;
}
#columnlist .col2 {
margin-left:33.5%;
color:#990;
}
#columnlist .col3 {
margin-left:67%;
color:#090;
}
#columnlist .col1+.col2, #columnlist .col2+.col3 {
clear:left;
margin-top:-9999px;
}
</style>
</head>
<body>
<div id="columnlist">
<h1>CSS2 - List Items Divided in Ordered Columns</h1>
<ul>
<li class="col1">Column One, Item 1</li>
<li class="col1">Column One, Item 2</li>
<li class="col1">Column One, Item 3</li>
<li class="col1">Column One, Item 4</li>
<li class="col1">Column One, Item 5</li>
<li class="col1">Column One, Item 6</li>
<li class="col1">Column One, Item 7</li>
<li class="col1">Column One, Item 8</li>
<li class="col1">Column One, Item 9</li>
<li class="col1">Column One, Item 10</li>
<li class="col1">Column One, Item 11</li>
<li class="col1">Column One, Item 12</li>
<li class="col1">Column One, Item 13</li>
<li class="col1">Column One, Item 14</li>
<li class="col1">Column One, Item 15</li>
<li class="col1">Column One, Item 16</li>
<li class="col1">Column One, Item 17</li>
<li class="col1">Column One, Item 18</li>
<li class="col2">Column Two, Item 19</li>
<li class="col2">Column Two, Item 20</li>
<li class="col2">Column Two, Item 21</li>
<li class="col2">Column Two, Item 22</li>
<li class="col2">Column Two, Item 23</li>
<li class="col2">Column Two, Item 24</li>
<li class="col2">Column Two, Item 25</li>
<li class="col2">Column Two, Item 26</li>
<li class="col2">Column Two, Item 27</li>
<li class="col2">Column Two, Item 28</li>
<li class="col2">Column Two, Item 29</li>
<li class="col2">Column Two, Item 30</li>
<li class="col3">Column Three, Item 31</li>
<li class="col3">Column Three, Item 32</li>
<li class="col3">Column Three, Item 33</li>
<li class="col3">Column Three, Item 34</li>
<li class="col3">Column Three, Item 35</li>
<li class="col3">Column Three, Item 36</li>
<li class="col3">Column Three, Item 37</li>
<li class="col3">Column Three, Item 38</li>
<li class="col3">Column Three, Item 39</li>
<li class="col3">Column Three, Item 40</li>
<li class="col3">Column Three, Item 41</li>
<li class="col3">Column Three, Item 42</li>
<li class="col3">Column Three, Item 43</li>
<li class="col3">Column Three, Item 44</li>
<li class="col3">Column Three, Item 45</li>
<!-- number of items can change
<li class="col3">Column Three, Item 46</li>
<li class="col3">Column Three, Item 47</li>
<li class="col3">Column Three, Item 48</li> -->
</ul>
</div>
</body>
</html>
相反,一个高度限制,不能用于控制浮子降,但宽度限制可以:
Conversely, a height limit cannot be used to control float drop, but a width limit can:
<html>
<head>
<style type="text/css">
#container { width: 300px; }
.nav { padding:0; margin: 0; border:0; float: left; outline: 1px solid yellow; background-color: black; }
#one { width: 100px; height: 300px; }
#two { width: 100px; height: 300px; }
#three { width: 101px; height: 300px; }
</style>
</head>
<body>
<div id="container">
<div class="nav" id="one">
</div>
<div class="nav" id="two">
</div>
<div class="nav" id="three">
</div>
</div>
</body>
</html>
引用
CSS - 测试你的CSS技巧30号 - 多列 权威指南负边距 飘浮通过清除被清除? 浮标及结算所 CSS - Test Your CSS Skills Number 30 - Multi columns The Definitive Guide to Negative Margins Which Floats are cleared by a Clear? Floats and Clearing