0

我正在尝试确定使用 CSS 和divs 制作并排列式布局的最佳方法。

出于某种原因，当我使用 时display: inline-block;，如果 column-div 的总宽度等于 100%，则最后一个 div 将换行到下一行。但是，如果我使用浮动 div，即使宽度相同，也不会发生这种情况。

例如，本例中的两个 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 回答