如何将标题与容器的一部分一起推？

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框架将此代码重新创建为一个整理的单行代码。

Answer 2

当然，下面是Css的基本设置：

http://jsfiddle.net/Nkapr/

询问您是否有任何问题。

Answer 3

这里的问题是HTML结构，它并没有真正写下你的目标（这是一个无赖！）

如果你所有人都在推动H3容器'contentheader'与'contentcontainer'中的其他东西一致，那么你可以在'contentcontainer'上设置一个负的上边距来向上拉，然后添加一个“contentcontainer”中元素的正上边距需要下降（在这种情况下为“图像”），给人的印象是h3部分实际上与其余内容一致。这有点像黑客，但如果你不能改变HTML，它可能会成功。

Answer 4

Thirtydot在评论部分的回答解决了我的问题。