Question

我正在尝试使用CSS和div来决定使用并排列式布局的最佳方法。

出于某种原因，当我使用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。

为什么会这样？

Answer 1

inline-block尊重标记中的空白区域。尝试：

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

看看会发生什么

内联块和浮动宽度/包装表现不同？

1 个答案: