<图&< figcaption>带有浮动图像，figcaption包装，而文章文本围绕图像/标题包装

问题描述

在网络上搜索了数周，但找不到满足我所有需求的答案（仅部分满足），非常欢迎您提供帮助。

Searched the web for weeks but can't find the answer that satisfies all my needs (only partial), help is very welcome.

我想要和拥有的东西完成：

What I want and have accomplished:

• 纯HTML5兼容和CSS


• 在文章中显示图片


• 图片必须有标题


• 标题必须在图片下方


• 标题必须限于图片的水平大小


• 标题可能长于一行，文本应换行到下一行（仍在图像尺寸之内）


• 图像和标题必须作为一组浮动到向左或向右（考虑使用< figure class = left> ）


• 文章文字必须环绕图片和标题


• 图像大小有所不同（第一个图像例如为200px，第二个图像中的其他文本为320px等）

• Plain HTML5 compliant and CSS
• Show an image within an article
• Image must have a caption
• Caption must below the image
• Caption must be limited to horizantal size of image
• Caption may be longer than one line and text should wrap to next line (still within size of image)
• Image and caption must float as a group to left or right (think of using <figure class="left">)
• Text of article must wrap around the image and caption
• Image size varies (first image is e.g. 200px, 2nd image somewhere else in text is 320px etc.)

现在我要添加这些要求：

And now I like to add those requirements:

• 我不想添加原始宽度图片像< figure class = left style = width：200px> 一样，但只有在没有其他方法的情况下。


• 响应式设计：当图像宽度占据显示宽度的50％以上时，必须将其限制为显示宽度的50％。


• 当显示宽度为320px或以下时，图片不能浮动，而必须是块级元素，因此图片周围没有文字换行。

• I don't like to add the original width of the image like <figure class="left" style="width:200px"> but only if there is no other way.
• Responsive design: when the image width will occupy more that 50% of the display width, it must be limited to 50% of the display width.
• When the display width is 320px or below, the image must not float but must a block level element, so no text wrap of article around the image.

我留在哪里：

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>

（我省略了填充/边距，使它看起来更好。）

(I left out the padding/margins and such to make it look better.)

推荐答案

尝试下面的CSS并查看您调整浏览器大小时的外观，图像上的文字换行：

Try the following css and look when you resize the browser, the text wrap on the image:

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

figcaption {
  text-align: center;
}

这篇关于<图&< figcaption>带有浮动图像，figcaption包装，而文章文本围绕图像/标题包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！