Блог

Это может показаться простым вопросом, но я, похоже, достиг узкого места и не могу найти альтернативный способ.

При создании таблиц можно стилизовать строку TH и иметь цвет фона (с заголовком), который охватывает верхнюю часть таблицы.

Однако я не уверен, как добиться этого с помощью divs, поскольку контейнер div имеет отступы со всех сторон.

Два метода, о которых я подумал, включают:

1. Используя относительное позиционирование — переместите заголовок влево, увеличьте ширину (более чем на 100%), а затем установите отступ до подходящего размера. Учитывая, что размер заголовка может измениться, это может не сработать для разной ширины экрана.

2. Определение «градиента» CSS в качестве фона и установка его, например, на 8% от верха одного цвета и белого для остальных. Это идеально, поскольку это просто изменение CSS, но учитывая, что заголовок может быть длинным или коротким (а также учитывать разную ширину экрана, например, метод 1), его нужно было бы настраивать для каждой «страницы» и ширины экрана.

Был бы очень признателен за экспертный вклад в это, поскольку кажется, что это должно быть просто, но я пока не могу придумать другой метод, который не требует множества настроек для конкретной страницы.

Спасибо!

РЕДАКТИРОВАТЬ: Спасибо за подсказку re: code — спешил опубликовать это, поэтому не сделал правильной скрипки. Извинения.

Чтобы уточнить: у меня нет таблиц, поскольку это часть основного содержимого, т.Е. Я хотел бы получить результат, аналогичный <table> , но фактически используемый <div> вместо этого.

В скрипке показано три подхода. Первая — это «табличная» версия, а две другие — мои текущие «решения», которые немного неудобны. Спасибо всем за ваш вклад 🙂

http://jsfiddle.net/Z686X/

ПРАВКА2

Недостаток вашего дизайна заключается в плохом размещении вашего заполнения размером 20 пикселей. На самом деле это очень простая структура для создания.

Фактически существует три компонента.

1. Контейнер, объединяющий ваши элементы
2. Заголовок в контейнере
3. Тело содержимого в контейнере

Из вашего описания вы хотите, чтобы содержимое было дополнено, а не все (иначе. контейнер).

JSBin: http://jsbin.com/zazeb/2 /

HTML

 <div class="container">
  <h1 class="title">Important title</h1>
  <div class="content">You want the padding on this element. Not the title</div>    
</div>
  

CSS

 .container {
  /* for visual */
  border: 1px solid #f00; 
}

.title {
  /* any bg color */
  background-color: #1e5799; 
  /* get rid of the default h1 margins */
  margin: 0; 
  /* account for the padding in your image */
  padding: 10px; 
  /* center it like your image */
  text-align: center; 
}

.content {
  /* add the "Padding" you want */
  padding: 20px; 
}
  

Примечание: Если по какой-то причине вам необходимо добавить отступ непосредственно к элементу контейнера, вы можете сделать некоторые отрицательные поля для заголовка. http://jsbin.com/hoqud/1 /

Вот еще одно решение с использованием отрицательных полей: http://jsfiddle.net/WV5Hb/3 /.

По сути, верхнее, правое и левое поля имеют те же отрицательные значения, что и заполнение контейнера. Чтобы убедиться, что заполнение везде одинаковое, я сначала применил мини-сброс.

HTML:

 <div class = "container">
    <h1>Title of Div</h1>
    <p>Sample Content</p>
    <p>Sample Row 2</p>
</div>
  

CSS:

 * {
    margin: 0;
    padding: 0;
}

.container { 
    padding: 20px; 
    border: 1px solid #000;
}

.container > h1 {
    margin: -20px -20px 20px -20px;
    padding: 20px;
    background-color: lightblue;
}
  

Я не знаю, понял ли я ваш вопрос, я провел некоторый тест с помощью JSFiddle:

JSFiddle

В основном играли с дисплеем и фоном для достижения требуемого эффекта, но я чувствую, что что-то неправильно понял.

 .test-zw {
    border: 1px solid #000;
    padding: 2px;
}

.test-gradient > h1 {
    margin: 0;
    padding: 0.5em 0;
    height: 100%;
    text-align: center;
    background-color: #1e5799;
 }

.test-gradient > p {
    margin: 0;
    padding: 3px;
}
  

Редактировать

Следуя вашему комментарию, я обновил JSFiddle:

JSFiddle изменен

В основном расположил h1 абсолютно сверху и поместил фон в контейнер… Также добавьте в контейнер отступ размером 20 пикселей, как предложено.

Надеюсь, это поможет!