css - 具有背景色的 float 元素周围的 block 元素

Question

这是我的情况:

http://jsfiddle.net/vZ4sB/

有没有办法让 H1 背景色占据容器的整个宽度减去 float 元素的宽度？

Answer 1

jsFiddle 暂时关闭了，但这是我解决的问题:

HTML

<div class="container">
  <h1>
    <img src="my_img.jpg" />
    <span>Here's my header!</span>
  </h1>
</div>

CSS

.container {
  border: 1px solid red;
  height: 500px;
  width: 500px;
}

h1 {
  background: url(my_header_bg.jpg) top right no-repeat;
  height: 30px;
}

h1 img {
  float: left;
}

h1 span {
  background: url(my_header_bg.jpg) top left no-repeat;
  float: left;
  line-height: 30px;
  padding: 0 5px;
}

我这里是在黑暗中拍摄的，但我猜你有一个带有一些文本的标题，文本后面的背景图像，或许还有一个标志在左边？如果我错了，请告诉我。

这可能需要更多的修改，但我所做的是在 H1 中 float 图像和跨度(带有文本)并将 h1 上的高度设置为静态高度。这样，跨度将始终与图像对接，并且 H1 将扩展 100%。我将左对齐的背景图像设置为跨度。然后我将右对齐的背景图像设置为 H1。如果背景图像是某种无缝图案，这可能会起作用。如果是静态宽度的图片，可以将span设置为背景图片的宽度，淡出到H1。

如果只是蓝色，你可以让H1背景保持蓝色。

看看这是否适合您的工作。