Избегайте контейнера div - PullRequest
Новая
       5

Избегайте контейнера div

0 голосов
/ 02 октября 2011

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

---------------------------
|   x   |  hello   |   x   |
|                          |
|   y   |  hi      |   y   |
---------------------------

x = строка розового фона y = строка желтого фона

Есть ли у кого-то доdate css (без js) решение отклонить необходимость контейнерного div только для заполнения?

html: 

<header>
    <div>
        hello
   </div>
</header>
<footer>
    <div>
        hi
   </div>
</footer>

css: 

header {
  background: pink;
}
header > div {
  width: 960px;
  margin:0 auto;
}

Кто-нибудьесть решение, может быть, что-то с псевдо до и после?Таким образом, вы можете просто написать красивый HTML: 

<header>hello</header>
<footer>hi</footer>

и исправить все это в css.

Это базовый пример, суть в том,Я часто обязан использовать div только для разметки, в основном для заполнения.Конечно, я могу установить отдельный фон, чтобы добиться цели, но я говорю о том, чтобы сохранить все это вместе, поскольку, вероятно, имеет ту же проблему и другой фон.И то же самое с основным содержимым и т. Д.

Хотелось бы, чтобы было что-то вроде: 

header{
  background: pink;
  padding: 100%-960px;
}

Это бы "сделало трюк" и масштабировалось после изменения размера области просмотра.

1 Ответ

0 голосов
/ 02 октября 2011

Обычно я просто использовал бы несколько контейнерных дивов с классом контейнера ... Как hellow и hi оба были бы в div с "классом-оберткой", а x и y оба были бы оберткой-оберткой шириной 100%. дивы.

Но так как ваша цель - избежать div-пакетов-обёрток ... тогда я не буду вдаваться в подробности о том, как вы можете сделать это с 4-мя div-обертками:)

Думаю, вам стоит взглянуть на эти ссылки:

...