Как использовать плавающий стиль в тегах <figure>при использовании semantic-ui - PullRequest
Новая
       29

Как использовать плавающий стиль в тегах <figure>при использовании semantic-ui

0 голосов
/ 20 февраля 2019

Скажем, я хочу, чтобы на моей веб-странице отображались такие вещи, как 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>

подпись к изображению тоже "распространена"

Может ли семантический пользовательский интерфейс работать так: 

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

как наследование?

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Этот ответ вдохновлен этим ответом .

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> по-прежнему необходимо.

0 голосов
/ 20 февраля 2019

Я надеюсь, что это решит вашу проблему с тегами 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;
}
...