Question

我需要在不使用float的情况下在某段落的右侧显示图像。所以我提出了这个使用display:table来获得非常相似结果的解决方案。

我的CSS在IE8上效果很好＆gt;但不适用于任何版本的Firefox。

至于我的理解显示：FF应该是support。

知道我在这里做错了什么以及如何修复它？感谢

   <!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">
    <head>
        <title></title>
        <style>
        .box
        {
            display:table;
            background-color:Yellow;
            margin:30px 0px 30px 0px;
        }
        .box p
        {
            background-color:Gray;
        }
        .box h2
        {

        }
        .box img
        {
            display:table-cell;
            vertical-align:top;
        }   
        </style>
    </head>
    <body>
        <div class="box">
            <h2>
                Title 01 here.</h2>
            <p>
                Some text 01 here, Some text 01 here, Some text 01 here, Some text 01 here, Some
                text 01 here, Some text 01 here.</p>
            <img src="http://crackle.imageshack.us/images/blue/cooltool.png" alt="Angry face" />
        </div>
        <div class="box">
            <h2>
                Title 02 here.</h2>
            <p>
                Some text 02 here, Some text 02 here, Some text 02 here, Some text 02 here, Some
                text 02 here, Some text 02 here.</p>
            <img src="http://crackle.imageshack.us/images/blue/cooltool.png" alt="Angry face" />
        </div>
    </body>
    </html>

Answer 1

display:table-cell;
vertical-align:top;

表示display:table-cell;对象的内容垂直对齐。

你需要先将图像放在其父图像中，为什么不能使用浮动？

显示问题：FireFox中的表格

1 个答案: