Css 向左或向右浮动时的不同图像边距

发布于12月20日

如何根据图像的对齐方式设置"智能"页边距？我的网站有Rich Text格式的页面，由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，反之亦然.

推荐答案

如果你知道float:left或float:right是在HTML标记中，那么你可以使用它作为你的 Select 器来做进一步的样式设置.所以:

figure {
  margin: 0;
}
[style*='float:left'] {
  margin-right: 1em;
}
[style*='float:right'] {
  margin-left: 1em;
}
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>