在浮动div之前定义最小可用高度？答案

【问题标题】：Defining minimum available height before floating divs?在浮动div之前定义最小可用高度？
【发布时间】：2012-11-24 08:28:51
【问题描述】：

我使用 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 技巧？

谢谢，康拉德

【问题讨论】：

标签： algorithm css-float two-column-layout computed-style

【解决方案1】：

在具有较大负边距的已清除元素上方使用浮动元素来控制浮动对齐。浏览器应该增加已清除元素的上边距，以便清除浮动。因此，浏览器会重新计算巨大的顶部负边距，以便元素清除浮动：

    <!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>

反之，不能用高度限制来控制float drop，但宽度限制可以：

    <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>

参考文献

【讨论】：