CSS

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

LogManager.AddHiddenAssembly(yourAssemblyWithDurationMethod)

CSS

<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>

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>类保留为空白，浏览器默认会将其呈现为“中心浮动”。但是centered中的<img>仍然是必需的。

使用语义UI

2 个答案:

html

CSS

CSS