0

複数の DIV をフローティングする際に問題が発生し、それらが含まれる div から抜け出してしまいます。例として、以下の私のコードを参照してください。

<!DOCTYPE HTML>
<html lang="en-GB">
    <head>
        <meta charset="utf-8" />
        <style>
            * {
                -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                -moz-box-sizing: border-box;    /* Firefox, other Gecko */
                box-sizing: border-box;         /* Opera/IE 8+ */
            }

            div.outer {
                width:300px;
                height:300px;
                border:3px solid #000;
                overflow:visible;
                padding:10px;
            }

            div.mid {
                overflow:hidden;
                border:1px solid #000;
                padding:0;
                width:485px;;
            }

            div.inner {
                width:150px;
                height:100px;
                background:#EDEDED;
                border:1px solid #C0C0C0;
                float:left;
                margin:5px;
            }

        </style>
    </head>

    <body class="landingPage">
        <div class="outer">
            <div class="mid">
                <div class="inner"></div>
                <div class="inner"></div>
                <div class="inner"></div>
            </div>
        </div>
    </body>
</html>

これは正常に機能しますが、実際には、「内側」の DIV がいくつあるかも、それらの幅もわかりません。したがって、「幅」プロパティを div.mid CSS に配置することはできません。ただし、幅を削除するたびに、内側の DIV が折り返されます。

誰でも助けることができますか？残念ながら、box-sizing プロパティはそのままにしておく必要があります

ここにフィドルがあります

4

2 に答える 2

0

あなたはインナーdivとセットwidth: auto;を取ることができmax-width: 150px;ます. それが最もなければならないことがわかっている場合、それらがどのくらいのサイズになるかはわかりません.

于 2013-09-19T14:48:09.550 に答える