html - 如何将标题推到容器的一部分旁边？

Question

我有一些 HTML:

<div id="thing">
  <div id="contentheader">
    <h3>Header</h3>
  </div>
  <div id="contentcontainer">
    <div id="image">
      <img alt="balt" src="imagesrc">
    </div>
    <div id="body">
      <p>hegl gegl</p>
    </div>
  </div>
</div>

我需要将“contentheader”中的 h3 向下推到“contentcontainer”中的图像旁边，同时让正文文本与它并排放置。除图像外，所有内容都是可变宽度的。

也许一张图片会更好:

如您所见，灰色对​​应“thing”，绿色对应“contentcontainer”，蓝色对应“contentheader”。

编辑 HTML 会很麻烦。除了图像固定宽度之外，我也无法制作任何东西。是否可以仅使用 CSS 来实现？ (能够用花车之类的东西来做这件事真是太棒了，但我不知道它是否可行)

Answer 1

我不认为您会找到一个完美的 CSS 解决方案。您可以使用定位，但如果您的标题很长且超过一行，您可能会遇到问题。

如果您愿意使用 javascript，则以下非框架代码段会起作用。

// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);

您可以使用 jQuery 或其他 javascript 框架将此代码重新创建为更简洁的单行代码。