Defining minimum available height before floating divs?

问题

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

I suppose that is not possible ... but however maybe there is a css trick?

Thanks, Konrad

回答1:

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>

References

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

来源：https://stackoverflow.com/questions/13741436/defining-minimum-available-height-before-floating-divs

标签

algorithm

css-float

two-column-layout

computed-style