当内容放在Chrome和Safari中时,内联div不会保持内联

Question

当内容放在Chrome和Safari中时,内联div不会保持内联

我有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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jam*_*gne 5

你需要添加vertical-align.默认值是baseline导致文本底部与基线对齐的默认值.尝试top或bottom它应该工作正常.

http://jsfiddle.net/aXesS/

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

归档时间：	14 年，8 月前
查看次数：	882 次
最近记录：	14 年，8 月前