css – 如何将内容放在浮动元素旁边并相对于包含元素？

我有这样的标记

<div>
  <h1 style="text-align:center;" >heading 1</h1>
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >heading 2</h1>
</div>
<div>
  Content goes here
</div>

问题是标题2相对于图像之后的空间的剩余部分居中,而不是整个div,因此它不在页面的中心.

如果我从位置：绝对的流中删除img,它不会下推内容而是重叠它.

解决方法

一种方法是使用徽标的大小为div添加右边距：

<div style="padding-right: 50px;">
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >heading</h1>
</div>
<div>
  Content goes here
</div>

另一种方法是从流中删除标题.这只能假设徽标高度大于航向高度.还要注意图像和标题可能会重叠.

<h1 style="position: absolute; width: 100%; text-align:center;">
    heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
  Content goes here
</div>