0

divCSS とsを使用して横に並べた列のようなレイアウトを作成する最善の方法を決定しようとしています。

何らかの理由で を使用するdisplay: inline-block;と、列 div の合計幅が 100% に等しい場合、最後の div が次の行に折り返されます。ただし、フローティング div を使用すると、幅が同じであっても、これは発生しません。

たとえば、この例の 2 つの div は異なる行に表示されます。

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />

        <style type="text/css">

            .column {   width: 50%;
                        display: inline-block;
                    }

        </style>

    </head>

    <body>

        <div class="column">

            Column 1

        </div>

        <!--    This div is on the second line  -->
        <div class="column">

            Column 2

        </div>

    </body>

</html>

しかし、この例ではそうではありません:

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />

        <style type="text/css">

            .column {   width: 50%;
                        float: left;
                    }

        </style>

    </head>

    <body>

        <div class="column">

            Column 1

        </div>

        <div class="column">

            Column 2

        </div>

    </body>

</html>

Chrome と IE8 の両方を使用しています。

なぜこれが起こるのですか？

4

1 に答える 1

2

inline-block は、マークアップ内の空白を尊重します。試す：

<div class="column">Column 1</div><div class="column">Column 2</div>

何が起こるか見てください

于 2012-06-06T17:50:40.257 に答える