Question

这是我的情况：

是否有一种方法可以使H1背景颜色占据容器的整个宽度MINUS浮动元素的宽度？

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中浮动图像和跨度（带文本）并将h1上的高度设置为静态高度。这样，跨度将始终与图像对接，H1将延伸100％。我将左对齐的背景图像设置为跨度。然后我将右对齐的背景图像设置为H1。如果背景图像是某种无缝模式，这可能会起作用。如果它是具有静态宽度的图像，您可以将跨度设置为背景图像的宽度，并将其淡出为H1。

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

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

Answer 2

如果.floater元素的宽度为200px（加上边距为2px），则可以使用相邻的同级选择器为margin-left个元素分配h2元素.floater：

.floater + h1 {
    margin-left: 202px;
}

JS Fiddle

Answer 3

尝试：

h1 {
    background: blue;
    overflow: hidden;
}

块元素周围浮动元素与背景颜色

3 个答案: