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

前端之家收集整理的这篇文章主要介绍了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>

猜你在找的CSS相关文章