1

複数のボックス (div) をすべて float:left を使用して 2 列に配置します。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 に答える