Html 当内容放在内嵌div中时，内嵌div不会保持内嵌状态；游猎_Html_Css_Cross Browser

Html 当内容放在内嵌div中时，内嵌div不会保持内嵌状态；游猎

html css

Html 当内容放在内嵌div中时，内嵌div不会保持内嵌状态；游猎,html,css,cross-browser,Html,Css,Cross Browser,我有3个内嵌div，设置了宽度和高度。它们看起来很棒，然后我在其中一个div中添加了内容，突然它们不再在Chrome和Safari中排列。（他们也从不在IE6和IE7中排队，我也想理解这一点。）发生了什么事？ .actionBox { 宽度：295px；身高：215px；边距：0 5px 5px 0；显示：内联块；背景色：#BBB； } ***把这段文字拿出来，他们会再次排成一行*** 您是否尝试过浮动：左而不是显示：内联块？您需要添加垂直对齐。默认值为baseline，这将导致文本

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


发生了什么事？
.actionBox
{
宽度：295px；
身高：215px；
边距：0 5px 5px 0；
显示：内联块；
背景色：#BBB；
}
***把这段文字拿出来，他们会再次排成一行***

您是否尝试过

浮动：左而不是显示：内联块？
您需要添加垂直对齐
。默认值为baseline
，这将导致文本底部与基线对齐。试试top
或bottom
，它应该可以正常工作

在fiddle中，前3个是您的代码。请注意，每个框中的文本底部都是对齐的。第二个3与垂直对齐：顶部。请注意，它们都排列得很好。
哇，首先我看到了JSFIDLE。这似乎很有效。。非常感谢。您是否有任何快速修复方法，以便它也能在IE6和IE7中工作？请将它们更改为spans。IE6（可能还有7）只允许在本机内联的元素上使用inline block。我真的很想让div填写它们所包含的div。
<!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>