我使用 float:left 将多个框(div)排列在两列中。div 有不同的高度,导致这样的布局:
AAA BBB
AAA BBB
AAA
AAA CCC
CCC
CCC
CCC
但是我想定义一个最小高度(最小可用空间),当一个盒子必须漂浮在左列时。我想要一个类似于这样的结果:
AAA BBB
AAA BBB
AAA
AAA
CCC
CCC
CCC
CCC
我想这是不可能的......但是也许有一个CSS技巧?
谢谢,康拉德
我使用 float:left 将多个框(div)排列在两列中。div 有不同的高度,导致这样的布局:
AAA BBB
AAA BBB
AAA
AAA CCC
CCC
CCC
CCC
但是我想定义一个最小高度(最小可用空间),当一个盒子必须漂浮在左列时。我想要一个类似于这样的结果:
AAA BBB
AAA BBB
AAA
AAA
CCC
CCC
CCC
CCC
我想这是不可能的......但是也许有一个CSS技巧?
谢谢,康拉德
在具有较大负边距的已清除元素上方使用浮动元素来控制浮动对齐。浏览器应该增加已清除元素的上边距,以便清除浮动。因此,浏览器会重新计算巨大的顶部负边距,以便元素清除浮动:
<!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>
相反,高度限制不能用于控制浮动下降,但宽度限制可以:
<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>
参考