小编luv*_*web的帖子

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

我想要并已完成的事情：

• 纯 HTML5 兼容和 CSS
• 显示文章中的图像
• 图片必须有标题
• 标题必须位于图片下方
• 标题必须限制为图像的水平尺寸
• 标题可能长于一行，文本应换行到下一行（仍在图像大小之内）
• 图像和标题必须作为一个组向左或向右浮动（考虑使用<figure class="left">）
• 文章的文字必须环绕图像和标题
• 图像大小各不相同（例如，第一张图像为 200 像素，文本中其他位置的第二张图像为 320 像素等）

现在我想添加这些要求：

• 我不喜欢添加图像的原始宽度，<figure class="left" style="width:200px">但前提是没有其他方法。
• 响应式设计：当图像宽度将占据显示宽度的50%以上时，必须限制为显示宽度的50%。
• 当显示宽度为 320px 或以下时，图像不能浮动，而必须是块级元素，因此图像周围没有文章的文本环绕。

我离开的地方：

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 …

我正在寻找一种方法,在h1和h2直接相互跟随的情况下,给H1提供更多利润率(或H2更多利润率).因此,在#1的情况下,应该应用正常的边距,但是在#2的情况下,我喜欢稍微改变边距(以在H1和H2之间提供更多的"空气").尝试使用h1 h2 {margin ...}和h1> h2 {margin ...},但到目前为止还没有成功.

情况1

<h1>heading 1</h1>
<p>text</p>
<h2>heading 2</h2>
<p>text</p>

案例#2

<h1>heading 1</h1>
<h2>heading 2</h2>
<p>text</p>