定义的最小可用高度浮动的div之前？

问题描述：

我安排多个盒子（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&#37;;
    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

定义的最小可用高度浮动的div之前？

相关推荐