Question

我试图将图像对齐在顶部，而文本则在右下角。我该怎么办？感谢。

＆＃13;

#outer {
border: 1px solid black;
width: 500px;
height: 500px;
text-align: right;
vertical-align: bottom;
}
img {
width: 100%;
height: 200px;
}

＆＃13;

<div id = 'outer'>

<img src = 'http://tokyodesu.com/wp-content/uploads/2014/05/cat2.jpg'>
This is a cat. Look at it closely, for it is not a dog.

</div>

＆＃13;

Answer 1

将文本放在一个单独的容器中（在外部容器内），绝对定位。对于图像，使用height: auto;保留比例而不失真：

#outer {
border: 1px solid black;
width: 500px;
height: 500px;
text-align: right;
vertical-align: bottom;
}
.bottomright {
position: absolute;
bottom: 0px;
right:0px;
}
img {
width: 100%;
height: auto;
}

-

<div id = 'outer'>
<img src = 'http://tokyodesu.com/wp-content/uploads/2014/05/cat2.jpg'>
<div class="bottomright">
This is a cat. Look at it closely, for it is not a dog.
</div>
</div>

Answer 2

要将某些内容与容器底部对齐，只需让容器position: relative;和要对齐的文字position: absolute; bottom: 0 并且为了防止图像重叠，只需添加padding-bottom: x，其中x是文本的高度。

＆＃13;

#outer {
border: 1px solid black;
width: 500px;
height: 500px;
text-align: right;
vertical-align: bottom;
position: relative;
padding-bottom: 15px;
}
.align-bottom {
position: absolute;
bottom: 0;
right: 0
}
img {
width: 100%;
height: 200px;
}

＆＃13;

<div id = 'outer'>

<img src = 'http://tokyodesu.com/wp-content/uploads/2014/05/cat2.jpg'>
<div class='align-bottom'>This is a cat. Look at it closely, for it is not a dog.</div>

</div>

＆＃13;

Answer 3

在#outer上使用display:table-cell将允许您将文本放在右下方，而无需绝对定位文本。然后，您可以将图像绝对定位在左上角，并确保在#outer上放置足够的填充，以至少匹配图像的高度。

这是一个小提琴：https://jsfiddle.net/y4toLqLp/

Answer 4

#outer {
position: relative;
border: 1px solid black;
width: 500px;
height: 500px;
text-align: right;
display: table-cell;    
}

#outer img {
width: 100%;
height: 200px;
position: relative;
top: 50%;
transform: translateY(0%);
}

#outer p {
    position: relative;
    top: 50%;
    transform: translateY(0%);
}

<div id = 'outer'>

<img src = 'http://tokyodesu.com/wp-content/uploads/2014/05/cat2.jpg'>
<p>This is a cat. Look at it closely, for it is not a dog.</p>

</div>

Answer 5

在遇到类似情况时，我发现的更简单的解决方案是使用figcaption和HTMLcaption HTML5结构并使用CSS处理ficaption。

figcaption {
    position: relative;
    top: -30px; /*adjust here*/
    left: 190px; /*and here*/
    color: white;
    font: normal 15px verdana, sans-serif;
}

<figure>
  <img src="https://media.giphy.com/media/2XOL4zsm6V0nm/giphy.gif" alt="Leonidas with shield in the rain">
  </img>
  <figcaption>
  &#169;giphy.com
  </figcaption>
</figure>

将图像对齐在顶部，将文本对齐到右下角

5 个答案: