Ширина Заголовков (H1, H2 и т.д.)
Существует глюк с consts! При ссылке на константу от другого блока его значение будет скомпилировано прямо в блок вызова. Тот путь при обновлении константы в блоке, на который ссылаются, это не изменится в блоке вызова!
4 ответа
Я бы использовал
#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
float:left;
clear:left;
}
#rightcol p {clear:left;}
правку после комментария
Если содержащий div плавает, очистка не очистит левую колонку. Итак, поместите rightcol влево и удалите поле
#rightcol {
float:left;
padding:70px 20px 20px 0px;
width:585px;
}
h1-h6 - это элементы уровня блока, и даже если они не находятся в контейнере (или только в теле), они растянутся по ширине окна. Одно из решений состоит в том, чтобы вместо этого изменить их отображение на встроенный блок:
<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>
Обратите внимание, что вам придется вручную сделать разрыв после заголовка, если следующий элемент не является элементом уровня блока, например p.
Тег заголовка (h1-h6) является элементом уровня блока и, таким образом, заполняет ширину контейнера, в котором он находится. Изменение его на
display:inline
приведет к уменьшению фона только по ширине текста. Однако это вызовет другие проблемы (поскольку встроенные элементы не ведут себя как блочные элементы во многих других отношениях).
Альтернативой является установка ширины для самого заголовка. Если вы хотите быть действительно хитрым, вы можете сделать это с помощью javascript, чтобы он вычислял его отдельно для каждого заголовка.
Вам придется немного поиграть и выяснить, что работает в вашей ситуации.
, как упоминалось другими display: inline-block; был бы вариантом, но не работает во всех браузерах. прямо сейчас я мог придумать заголовки float: left; и элемент, следующий за clear: left;
Другой способ - не такой чистый - это добавить промежутки вокруг текст заголовка и укажите цвет фона для этого диапазона:
<h1><span>your text</span></h1>
h1 span { background-color:#369; }