блокировать элементы вокруг плавающих элементов с цветом фона

Question

Это мой случай:

http://jsfiddle.net/vZ4sB/

Есть ли способ, которым цвет фона H1 занимает всю ширину контейнера МИНУС ширину плавающего элемента?

Answer 1

Вы можете, если ширина элемента .floater является статической при 200px (плюс 2px для границ), использовать селектор соседнего брата, чтобы назначить margin-left этим h2 элементам, следующим за .floater:

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

JS Fiddle .

Answer 2

Попробуйте с:

h1 {
    background: blue;
    overflow: hidden;
}

Answer 3

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 синим.

Посмотрите, подходит ли это тому, с чем вы работаете.