为图像留出空间并添加标题以获得更好的布局

您始终可以将图像浮动到一侧并通过赋予其“floatright”之类的类并将其声明为以下内容来为其提供一些边距

.floatright {
float: right;
margin: 5px;
}

这很好，但是让我们稍微改变一下，以便能够获得更多控制权并为图像添加标题。这为任何网络文章增添了不错的触感，并提供了更专业的布局感觉。

不要为图像指定类，而是将其放在一个 div 内，并为该 div 指定一个类。在 div 内部，包含图像以及标题

<div class="rightside_image">
  <img src="egg.jpg" alt="egg" />
  <p>Stop-motion image of an<br />egg getting sliced in half.</p>
</div>

然后在您的 CSS 中声明该类

div.rightside_image {
float: right;
padding: 10px;
margin: 10px;
border: 2px solid #cccccc;
text-align: center;
font-size: 0.8em;
font-style: italic;
}

然后，您可以复制并更改此声明以创建不同的变体，例如左浮动图像、居中图像、不同的背景颜色等。

[在线示例]

[下载示例]