Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
 Аватар для MrLOLS
23 / 23 / 4
Регистрация: 21.11.2010
Сообщений: 77

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

16.04.2019, 23:32. Показов 1386. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Нужно создать резиновый трехколоночный макет на 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}
Миниатюры
Три колонки на DIV через CSS  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
16.04.2019, 23:32
Ответы с готовыми решениями:

CSS!? Div в div'e, как не потерять позиции css внутреннего div'a при изменении размера браузера?
вот когда изменяю размер браузера, то внутренний div не хочет изменяться вместе с контейнером, а контейнер изменяется? .container{ ...

Как сделать вот такой макет через html и css (div и css)
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот серый цвет и меню тоже на весь экран.По...

Вывод материала joomla в 2 колонки через CSS файл шаблона
Доброго времени суток! Необходимо вывести новости сайта в две колонки, установлен не стандартный шаблон. Во многих решениях пишут что...

3
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
16.04.2019, 23:50
Не получается сделать простую разметку
0
 Аватар для MrLOLS
23 / 23 / 4
Регистрация: 21.11.2010
Сообщений: 77
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>
0
 Аватар для chomovva
61 / 59 / 23
Регистрация: 29.07.2014
Сообщений: 286
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>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
18.04.2019, 11:15
Помогаю со студенческими работами здесь

Оформление рамки div через css
Как закруглить рамку контейнера так,как это сделал на этом сайте

Центрирование блока div через css
Подкажите, можно ли в css отцентрировать блок div? Но не как фоновое изображение, а просто как сам блок?

Возможно ли через css скрыть блок div?
Все привет. возник такой вопрос, возможно ли через css скрыть блок div, чтобы не отображался, например при нажатии на кнопку? подскажите...

Как через js вызвать класс css для div по id
Не могу понять как перевернуть назад карточки &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;style&gt; ...

Показать второй div-sidebar перед первым div-content на CSS
Как в данном примере можно с помощью CSS показать блок сайдбара первым, перед блоком контента, не смотря на то, что в коде блок контента...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Фото всей Земли с борта корабля 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. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru