Три колонок режим макета для достижения Святого Грааля

Три колонки макета, также известный как летающее крыло

Три макета, ширина промежуточной адаптивной, фиксированной ширины с обеих сторон;
Средний столбец показывает приоритет для визуализации в браузере;
Максимальная высота позволила любой столбец;
В основном рентабельность налево = 100%, может быть использован на линии переключения ,, коробчатого проклейки = обивка + маржа + границе + cotnent
На самом деле, слева и справа на заполнение контейнера ,, маржинальной левый = 100% по отношению к ширине родительского класса для перемещения Shenma ,, ,, перешел не поймут

<! DOCTYPE HTML>
<HTML LANG = "EN">

<Голова>
    <Мета кодировка = "UTF-8">
    <META NAME = "вьюпорт" содержание = "ширина = ширина устройства, исходная шкала = 1.0">
    <META HTTP-эквив = "X-UA-Compatible" содержание = "т.е. = край">
    <Title> макет шаблон Грааль </ title>
    <Стиль>
        * {
            Маржа: 0;
            обивка: 0;
        }
        # Заголовок # сноска {
            цвет фона: зеленый;
            выравнивания текста: центр;
        }
        #контейнер{
            / * Ширина: 100%; * /
            обивка: 0 0 150px 200px;
            высота: 500px;
            фон-цвет: золото;
        }
        .column {
            плыть налево;
            высота: 100%;
            позиция: относительная;
        }
        #центр{
            ширина: 100%;
            цвет фона: HotPink;
        }

        #правильно{
            Слева направо: 150px;
            ширина: 150px;
            цвет фона: синий;
            Левое поле: -150px;

        }
        #оставил{
            Слева направо: -200px;
            ширина: 200px;
            цвет фона: RoyalBlue;
            Запас налево: -100%;

        }

    </ Стиль>

</ HEAD>

<Тело>
        <DIV ID = "заголовок"> заголовок </ DIV>
        <DIV ID = "контейнер">
          <DIV ID = "центр" класс = "колонка"> Центр </ DIV>
          <DIV ID = класс "влево" = "колонка"> влево </ DIV>
          <DIV ID = "вправо" класс = "колонка"> вправо </ DIV>
        </ DIV>
        <DIV ID = "сноска"> сноска </ DIV>

</ Body>

</ Html>

　　Летающее крыло ,, СПОСОБ две реализаций

Удалено оставляя промежутки позиции позиционирования, левой и вправо ,, ,, промежуточного значения заполнените в основные края нейтронного контейнера элемента
Многоцелевой ДИВ

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Голова>
    <Мета кодировка = "UTF-8">
    <META NAME = "вьюпорт" содержание = "ширина = ширина устройства, исходная шкала = 1.0">
    <META HTTP-эквив = "X-UA-Compatible" содержание = "т.е. = край">
    <Title> Летающее крыло </ title>
    <Стиль>
     
        * {
            Маржа: 0;
            обивка: 0;
        }
        Тело {мин-ширина: 700px;}
        # Заголовок # сноска {
            цвет фона: зеленый;
            выравнивания текста: центр;
        }
        #контейнер{
            высота: 500px;
            фон-цвет: золото;
        }
        .column {
            плыть налево;
            высота: 100%;
     
        }
        #центр{
            ширина: 100%;
            цвет фона: HotPink;
        }

        #правильно{
         
            ширина: 150px;
            цвет фона: синий;
            Левое поле: -150px;

        }
        #оставил{
            / * Левый: -200px; * /
            ширина: 200px;
            цвет фона: RoyalBlue;
            Запас налево: -100%;

        }
        .sub {
            Запас: 0 0 150px 200px;
        }

    </ Стиль>
</ HEAD>
<Тело>
        <DIV ID = "заголовок"> заголовок </ DIV>
        <DIV ID = "контейнер">
          <DIV ID = "центр" класс = "столбец"> <DIV класс = "субсчет"> Центр </ DIV> </ DIV>
          <DIV ID = класс "влево" = "колонка"> влево </ DIV>
          <DIV ID = "вправо" класс = "колонка"> вправо </ DIV>
        </ DIV>
        <DIV ID = "сноска"> сноска </ DIV>
</ Body>
</ Html>

　гибкий макет

　　　　Жуань Ифэн Flex Подробные примеры статей

　　　　Абсолютное позиционирование может быть достигнуто,

<! DOCTYPE HTML>

<Голова>

<Мета кодировка = "UTF-8">

<Title> расположение, абсолютное позиционирование </ title>

<Стиль>

* {

Маржа: 0;

обивка: 0;

}

Тело {мин-ширина: 700px;}

# Заголовок # сноска {

цвет фона: зеленый;

выравнивания текста: центр;

}

#контейнер{

/ * Ширина: 100%; * /

высота: 500px;

фон-цвет: золото;

позиция: относительная;

}

.column {

позиция: абсолютная;

высота: 100%;

верх: 0;

}

#центр{

Запас: 0 0 150px 200px;

/ * Ширина: 100%; * /

цвет фона: HotPink;

высота: 100%;

}

#правильно{

право: 0;

ширина: 150px;

цвет фона: синий;

}

#оставил{

Слева направо: 0;

ширина: 200px;

цвет фона: RoyalBlue;

}

</ Стиль>

</ HEAD>

<Тело>

<DIV ID = "заголовок"> заголовок </ DIV>

<DIV ID = "центр" класс = ""> Центр </ DIV>

<DIV ID = класс "влево" = "колонка"> влево </ DIV>

<DIV ID = "вправо" класс = "колонка"> вправо </ DIV>

</ DIV>

<DIV ID = "сноска"> сноска </ DIV>

</ Body>

</ Html>