左右浮动时图像边距不同

Question

如何根据图像的对齐方式设置图像的“智能”边距？我的网站有富文本格式的页面，由 django-ckeditor 提供支持。当用户插入图像（或带有图像的图形元素）时，他可以将其右对齐或左对齐。

<figure class="image" style="float:right">
    <img height="180" width="280" src="/media/about/team/images.jpeg">
    <figcaption>Hello world!</figcaption>
</figure>

我希望图像与文本块的外侧很好地对齐。这意味着，外边距和填充应为 0，内边距应为 1em。

是否可以使用 CSS 样式来做到这一点？我想我在一个网站上见过它，但不记得在哪里了。

逻辑应该如下：如果元素已有样式“float: left”，则左边距为1em，右边距为0，反之亦然。

Answer 1

如果您知道

float:left

的

float:right

位于 HTML 标记中，那么您可以将其用作选择器来进一步设置样式。所以：

figure {
  margin: 0;
}
[style*='float:left'] {
  margin-right: 2em;
}
[style*='float:right'] {
  margin-left: 2em;
}
hr { 
  clear:both;
}
section {
  text-align: justify; /* to show clearly where the margins are */
}

<section>
<figure class="image" style="float:left">
    <img height="180" width="280" src="/media/about/team/images.jpeg">
    <figcaption>Hello world!</figcaption>
</figure>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<hr>
<section>
<figure class="image" style="float:right">
    <img height="180" width="280" src="/media/about/team/images.jpeg">
    <figcaption>Hello world!</figcaption>
</figure>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>