Question

如何设置div块vertical-align：bottom？（div块应该在图像上方。）

.block{
    background-color:#999999;
    width:480px;height:100px;

    position:absolute;

    display: table-cell;
    vertical-align:bottom;
    }


<div style="display: table; height: 480px; position: relative; overflow: hidden;">
    <div class="block">This is the text.</div>
    <img src="image.jpg" width="480" height="480"/>
</div>

Answer 1

将vertical-align:bottom更改为bottom:0。

这样，div将粘贴到容器的底部（因为容器有position:relative，所以它会运行。）

Answer 2

您的所有代码都可以使用，但不需要所有样式属性。我测试了下面的工作代码。

<html>
<head>
<style>
.block{
    background-color:#999999;
    width:480px;
    height:100px;
    position:absolute;
    height: 480px;  
  }
</style>
</head>
<body>
    <div class="block">This is the text.</div>
    <img src="image.jpg" width="480" height="480"/>
</body>
</html>

可以尝试用firebug禁用未恢复的样式吗？它会减少代码行。

如何在图像上设置div块'vertical-align：bottom'

2 个答案: