Три колонки на DIV через CSS

@MrLOLS · Регистрация: 21.11.2010

Студворк — интернет-сервис помощи студентам

Нужно создать резиновый трехколоночный макет на DIV. Как на картинке.

Пример табличной верстки: https://codepen.io/MrLOLs/pen/KYZeeL

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru">
 
<head>
</head>
 
<body>
  <table width="100%" style="border: 1px solid #111;">
    <tr>
      <td style="border: 2px solid red;">LEFT</td>
      <td width="100%" style="border: 2px solid green;">CENTER</td>
      <td style="border: 2px solid yellow;">ПРАВО</td>
    </tr>
  </table>
 
</body>
 
</html>

CSS
1
body,legend{background:#000; color:#9f9f9f; font-family:Tahoma, sans-serif; font-size:8pt; font-weight:bold}

Моя попытка блочной верстки: https://codepen.io/MrLOLs/pen/eoyKjm

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru">
<head>
</head>
 
<body>
  <div style="width:100%; border: 1px solid #111;">
    <div style="float: left; border: 2px solid red;">LEFT</div>
    <div style="width:100%;display: inline-block;border: 2px solid green;">CENTER</div>
    <div style="float: right; border: 2px solid yellow;">ПРАВО</div>
  </div>
</body>
 
</html>

CSS
1
body,legend{background:#000; color:#9f9f9f; font-family:Tahoma, sans-serif; font-size:8pt; font-weight:bold}

@mrtoxas · 16.04.2019, 23:50

Не получается сделать простую разметку

@MrLOLS · 17.04.2019, 01:48 **[ТС]**

Нашел два варианта решения:
1) Через display: flex

HTML5
1
2
3
4
5
  <div style="border: 1px solid white; display: flex; ">
    <div style="background-color: red;">LEFT</div>
    <div style="background-color: green; width:100%">CENTER</div>
    <div style="background-color: yellow; margin-left: auto;">RIGHT</div>
  </div>

2) Использовать табличное поведение через display: table-cell

HTML5
1
2
3
4
5
<div   style="border: 1px solid white; display: table;">
    <div style="background-color: red; display: table-cell;">LEFT</div>
    <div style="background-color: green; width:100%; display: table-cell;">CENTER</div>
    <div style="background-color: yellow;  display: table-cell;">RIGHT</div>
  </div>

@chomovva · 18.04.2019, 11:15

Вариант №1

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }
        .container:after {
            content: '';
            display: table;
            clear: both;
        }
        .aside {
            width: 360px;
            margin: 0px 15px;
        }
        .aside--left {
            float: left;
        }
        .aside--right {
            float: right;
        }
        .article {
            width: 100%;
            margin: 0px 390px;
        }
    </style>
</head>
<body>
    <div class="container">
        <aside class="aside aside--left">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolorem illo fugit voluptate nobis ullam doloremque vero placeat. Libero, nihil labore maxime corporis. Incidunt voluptates, repellendus non sequi dolore sapiente!</p>
        </aside>
        <aside class="aside aside--right">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolorem illo fugit voluptate nobis ullam doloremque vero placeat. Libero, nihil labore maxime corporis. Incidunt voluptates, repellendus non sequi dolore sapiente!</p>
        </aside>
        <article class="article">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolorem illo fugit voluptate nobis ullam doloremque vero placeat. Libero, nihil labore maxime corporis. Incidunt voluptates, repellendus non sequi dolore sapiente!</p>
        </article>
    </div>
</body>
</html>

Добавлено через 6 минут
Вариант №2

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
        }
        .aside {
            width: 250px;
            margin: 0px 15px;
            flex-shrink: 0;
        }
        .aside--left {
            order: 1;
        }
        .aside--right {
            order: -1;
        }
    </style>
</head>
<body>
    <div class="container">
        <aside class="aside aside--left">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolorem illo fugit voluptate nobis ullam doloremque vero placeat. Libero, nihil labore maxime corporis. Incidunt voluptates, repellendus non sequi dolore sapiente!</p>
        </aside>
        <aside class="aside aside--right">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolorem illo fugit voluptate nobis ullam doloremque vero placeat. Libero, nihil labore maxime corporis. Incidunt voluptates, repellendus non sequi dolore sapiente!</p>
        </aside>
        <article class="article">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolorem illo fugit voluptate nobis ullam doloremque vero placeat. Libero, nihil labore maxime corporis. Incidunt voluptates, repellendus non sequi dolore sapiente!</p>
        </article>
    </div>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	16.04.2019, 23:50
	Не получается сделать простую разметку 0