css - 和 带有 float 图像、figcaption 环绕和文章文本环绕图像/标题

Question

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

我想要的和已经完成的:

• 纯 HTML5 兼容和 CSS
• 在文章中显示图片
• 图片必须有标题
• 标题必须在图片下方
• 标题必须限制在图像的水平大小
• 标题可能超过一行，文本应换行到下一行(仍在图像大小范围内)
• 图像和标题必须作为一个组向左或向右浮动(考虑使用 <figure class="left"> )
• 文章正文必须包围图片和标题
• 图片大小各不相同(例如，第一张图片为 200 像素，文本中其他地方的第二张图片为 320 像素等)

现在我想添加这些要求:

• 我不喜欢像<figure class="left" style="width:200px">那样添加图像的原始宽度但前提是别无选择。
• 响应式设计:当图片宽度将占据显示宽度的 50% 以上时，必须将其限制在显示宽度的 50% 以内。
• 当显示宽度为 320 像素或更小时，图片不能 float ，但必须是 block 级元素，因此文章周围的文字不能环绕图片。

我离开的地方:

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>

(我省略了填充/边距等以使其看起来更好。)

Answer 1

也许这对你来说太 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 答案。