如何在包装照片周围获得blockquote

Question

我刚刚在我的博客上安装了一个新模板，但我不能为我的生活弄清楚如何在照片周围包装一个blockquote。这是当前的blockquote CSS：

.post blockquote {
font-style:italic;
background-color:#ECF1F2;
padding: 20px 20px 20px 20px;
border:1px dotted #31484C;
line-height: 1.8em !important;}

This page显示了我尝试修复的示例，this page显示了我希望它执行的操作。

我需要添加什么才能使其正常工作？

Answer 1

将img标记放在包含文字的区块内，并将float: left应用于img。这就是最初的花车。

Answer 2

我已经隔离了相关的CSS并制作了一个simplified example，希望能让你更清楚（我已经创建了实用程序类来进行文本对齐，因为初始代码是内联样式的HTML，这不是最佳实践。

密钥CSS：

所有内容都包含在容器div中。然后是以下

float: left;
clear: left;
margin-bottom: 1em;
margin-right: 1em;

适用于本书的缩略图。由于它仅清除左侧，因此右侧的内容可以在其周围流动。

通过将margin和padding应用于blockquote，可以创建弹出blockquote的书籍的错觉;然而，所有真正发生的事情是图像清除左侧，图像的大小。之后，允许来自右侧的内容完全填充父容器，这是块级元素的默认特性。