1

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

谢谢，康拉德

4

1 回答 1

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>

相反，高度限制不能用于控制浮动下降，但宽度限制可以：

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

参考

于 2013-02-06T23:36:13.863 回答