如何使用浮动风格 使用语义ui时的标签

Question

说我希望我的网页显示像this，但我想使用<figure>标签。问题是，简单地将风格附加到<figure>并不是一个完美的方式。 例如，如果添加circular，那么<img>和<figcaption>都将被“圆圈化”。

<figure class="ui small right floated image circular">
    <img src="/img/here.jpg">
    <figcaption><a href="">Caption here...</a></figcaption>
</figure>

caption of the picture is "circulared" too

语义ui可以像这样工作：

<figure class="ui right floated">
    <img class="image small circular"> 
    <figcaption class="something else">

有点像继承吗？

Answer 1

我希望这将解决你的问题与img标签和div让我知道如果有任何疑问检查这个代码笔https://codepen.io/anon/pen/OdqKLy

HTML

<div class="card">
   <div>
     <img class="ui image circular" src="https://sample-videos.com/img/Sample-jpg-image-500kb.jpg">
   </div>
   <div>
     <a href="">Caption here...</a>
   </div>
</div>

CSS

.card {
  width: 180px;
  margin: 10px;
  padding: 0px 10px;
  text-align: center;
}

Answer 2

这个答案的灵感来自于这个answer。

CSS

<style>
    [class*="left floated"] {
        float: left;
        margin-left: 0.25em;
    }

    [class*="right floated"] {
        float: right;
        margin-right: 0.25em;
    }

    figcaption[class*="centered"] {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        display: block;
    }
</style>

然后，如果你想右浮动或左浮动整个<figure>，只需将它添加到类中，如下所示：

<figure class="right floated">
    <img class="ui small bordered centered circular image" src="image.png">
    <figcaption class="centered">
        Caption here...
    </figcaption>
</figure>

如果你想让整个<figure>居中，只需将<figure>类留空，浏览器默认将它渲染为“center float”。但centered中的<img>仍然是必要的。