如何在HTML/CSS中实现链接放置于图片下方而非右侧

你遇到的现象本质是HTML元素默认显示模式的差异：

• <img>和<a>标签默认都是行内元素，特性是多个行内元素会在同一行从左到右排列，不会自动换行
• <p>标签默认是块级元素，特性是独占一整行，前后自动换行，所以你把a标签换成p标签就能自动显示到图片下方

方法1：直接加换行标签（无需修改CSS） #

在img标签和a标签之间加<br />换行标签即可，修改后的HTML代码如下：

<div class="images">
  <img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
  <br />
  <a class="link1" href="https://www.google.com">Test</a>
</div>

方法2：把img设置为块级元素（修改CSS） #

给img添加display: block属性，让img独占一行，后面的链接自然会换行到下方，修改后的CSS代码如下：

.images {
  position: absolute;
  left:10px;
  top: 200px;
  font-size: 120%;
}
/* 新增下面这段规则 */
.images img {
  display: block;
}

方法3：把a标签设置为块级元素（修改CSS） #

和方法2逻辑一致，给a标签设置display: block，让它自动换行到新的一行，修改后的CSS代码如下：

.images {
  position: absolute;
  left:10px;
  top: 200px;
  font-size: 120%;
}
/* 新增下面这段规则 */
.images .link1 {
  display: block;
}

内容的提问来源于stack exchange，提问作者user17183913