‹figure›&‹figcaption› с плавающим изображением, обтеканием figcaption и обтеканием текста статьи вокруг изображения/подписи

Искал в Интернете в течение нескольких недель, но не смог найти ответ, который удовлетворял бы все мои потребности (только частично), помощь очень приветствуется.

Чего я хочу и чего добился:

  • Обычная совместимость с HTML5 и CSS
  • Показать изображение в статье
  • Изображение должно иметь подпись
  • Подпись должна быть под изображением
  • Подпись должна быть ограничена размером изображения по горизонтали.
  • Заголовок может быть длиннее одной строки, а текст должен переноситься на следующую строку (по-прежнему в пределах размера изображения).
  • Изображение и подпись должны плавать как группа слева или справа (подумайте об использовании <figure class="left">)
  • Текст статьи должен обтекать изображение и подпись
  • Размер изображения варьируется (первое изображение, например, 200 пикселей, второе изображение где-то еще в тексте — 320 пикселей и т. д.)

И теперь я хотел бы добавить эти требования:

  • Мне не нравится добавлять исходную ширину изображения, например <figure class="left" style="width:200px">, но только если нет другого пути.
  • Отзывчивый дизайн: когда ширина изображения будет занимать более 50% ширины экрана, она должна быть ограничена 50% ширины дисплея.
  • Когда ширина дисплея составляет 320 пикселей или меньше, изображение не должно плавать, а должно быть блочным элементом, поэтому текст статьи не обтекает изображение.

Где я ушел:

figure {
  display: inline
}

figcaption {
  display: block
}

figure.left {
  float: left
}

figure.right {
  float: right
}
<p>This is a part of the text of the article and at this point a image is inserted at the left side
  <figure class="left" style="width:250px">
    <img src="image.png" alt="img txt">
    <figcaption>image caption and a lot of text</figcaption>
  </figure>
  and the article text goes on and on so that it will wrap around the image</p>

(Я пропустил отступы/поля и тому подобное, чтобы это выглядело лучше.)


html css figure
person luvTweb    schedule 16.07.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Попробуйте следующий css и посмотрите, когда вы изменяете размер браузера, текст обтекает изображение:

.left {
  float: left;
  border: 5px solid #BDBDBD;
  background: #E0E0E0;
  padding: 5px;
  margin: 0px;
}

figcaption {
  text-align: center;
}
person SRL    schedule 22.09.2013

arrow_upward
1
arrow_downward

Возможно, вам это кажется слишком html3, но я нашел этот ответ:

http://www.sitepoint.com/forums/showthread.php?1049396-How-to-force-this-figcaption-element-to-respect-its-parent-s-width-boundaries

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: bottom;
}

Я не думаю, что это запрещено HTML5 или CSS3, и мне кажется, что это работает.

Оставляя в стороне требования к адаптивному дизайну — я чувствую, что это отдельный вопрос, на который у меня нет хорошего ответа только для CSS.

person Julian    schedule 03.02.2014

arrow_upward
0
arrow_downward

Это может помочь кому-то решить эту проблему. Я также ищу способ отобразить заголовок справа от изображения с той же высотой, что и изображение.

figure, .figure {
  
     display: inline-table;
}

figcaption {
    display: table-caption;
     caption-side: bottom;
      background-color: red;
  
}
     
img {
     width: 100%;
}
     
.image {
     width: auto;
}
     
     figure div {
          display: inline-table;
          background-color: aqua;
     }
     
.caption {
    display: table-caption;
     caption-side: top;
      background-color: red;
     margin: 0;
}
<figure>
    <h2 class="caption">caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </h2>
    
        <img src="http://mintnet.net/images/thumbs/small-mossy.jpg"> 
        <figcaption>caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </figcaption>
</figure>

<figure>
    <figcaption>caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </figcaption>
    
        <img src="http://mintnet.net/images/thumbs/small-mossy.jpg">
       
</figure>

<figure>
    <div class="caption">caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </div>
    
       <div><img  class="image" src="http://mintnet.net/images/thumbs/small-mossy.jpg">
            </div> 
       
</figure>

person Võ Minh    schedule 07.07.2016