Question

我有3个内联div，设置宽度和高度。它们看起来很棒，然后我在其中一个div中添加内容，突然之间它们在Chrome和Safari中不再排列。（他们也从未在IE6和7中排队。我也很想理解这一点。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>What is going on?</title>
        <style type="text/css">
            .actionBox
            {
                width: 295px;
                height: 215px;  
                margin: 0 5px 5px 0;
                display: inline-block;
                background-color: #BBB;
            }
        </style>
    </head>
    <body>
            <div class='actionBox'>
                *** TAKE THIS LIKE OF TEXT OUT AND THEY WILL ALL LINE UP AGAIN ***
            </div>
            <div class='actionBox'>
            </div>
            <div class='actionBox'>
            </div>
    </body>
</html>

Answer 1

您需要添加vertical-align。默认值为baseline，这会导致文本底部与基线对齐。试试top或bottom，它应该可以正常使用。

http://jsfiddle.net/aXesS/

在小提琴中，前三个是你的代码。请注意，每个框中文本的底部都排成一行。第二个3是vertical-align:top。请注意，他们都很好地排队。

Answer 2

您是否尝试float:left;代替display:inline-block;？

当内容放入其中时，内联div不会保持内联Chrome和＆amp;苹果浏览器

2 个答案: