Question

我使用了教程https://www.w3schools.com/howto/howto_css_image_text.asp

中的示例

我不明白为什么我的文字与外部div的右下角对齐而不是图像，有人可以解释为什么吗？以及如何在没有固定高度容器的情况下解决此问题。

HTML

<div class="container">
   <img src="http://via.placeholder.com/200x50"> 
   <div class="bottom-right">Bottom Right aligned to outer container, why?</div>
</div>
<br/>
<div class="container">
  <div class="box">line<br/>line<br/>line<br/>line<br/>line</div>
  <div class="bottom-right">Bottom Right aligned to inner box</div>
</div>

CSS

.container {
    position: relative;
    border: black 1px solid;
}
.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    background: lightgreen;
}
img {
    width: 100%; 
    border: red 1px solid;
    box-sizing: border-box;
}
.box {
    border: red 1px solid;
}

它显示图像高度小于外部容器高度。我可以使用文本“bottom”属性来对齐它，但可能有更好的解决方案。

Answer 1

您需要更改图像diplay属性。

添加：

img {
    display: block;
}

默认情况下，图像呈现为内联元素。

Answer 2

由于图像下方的空白，您看到的差异。

修复它只需添加vertical-align：top;到图像

img {
    width: 100%; 
    border: red 1px solid;
    box-sizing: border-box;
    vertical-align:top; /*add*/
}

现在您的文字将处于同一位置。

您提供的两个示例实际上都位于.container

的右下角

如何在css中没有固定高度的图像上定位文本

2 个答案: