Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.79/104: Рейтинг темы: голосов - 104, средняя оценка - 4.79
0 / 0 / 0
Регистрация: 26.10.2015
Сообщений: 3

Разделить div на 3 равные части

20.09.2016, 20:26. Показов 21802. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Приветствую.
Интересоваться вёрсткой начал около 2-ух недель назад. Пока-что всё получается, за исключение одного — правильно разделить элемент на 3 равные части. Чтение в течение двух вечеров дало понять что это можно делать через ul-li, но вроде как уже не актуально (хотя встречал на крупных сайтах такой вариант), через display:table, inline, inline-block или table-cell и через float:left. Последний часто используется и вроде как правильный. Однако, хотелось бы какого-то единственно верного решения.

Сейчас у меня так: http://codepen.io/anon/pen/GjjVvW

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
47
48
49
50
51
<div id="head"></div>
 
<div id="logo">
    <div class="logo"><img src="img/123.png" alt="пусто"></div>
</div>
 
<div id="main-text">
    <p><span style="background-color: black;">abcdgighjilpmiweqjxcc</span></p>
</div> 
 
<div id="rom">
</div>
 
<div id="niz">
  
<div class="odin">
<h4>1</h4>
<p>Ему предложена роль Уилла Скарлета — сводного брата Робин Гуда и участника шайки веселых разбойников, руководимой Малышом Джоном.
 
Образ же легендарного героя средневековых баллад закреплен за Тэроном Эджертоном («Kingsman: Секретная служба», «Эдди Орел»)
 
Постановщиком картины выступит Отто Баферст, приложивший руку к криминальной теледраме «Острые козырьки». Сценарий написал Джоби Харольд, ответственный за текст для «Меча короля Артура» Гая Ричи.
 
По своему духу фильм будет отсылать к «Темному рыцарю» и расскажет о том, как Робин Гуд по возвращении домой после крестовых походов обнаруживает Шервуд охваченным коррупцией и злом. Впоследствии он собирает группу находящихся вне закона персонажей, дабы взять ситуацию под контроль.</p>
</div>
 
<div class="dva">
<h4>2</h4>
<p>Ему предложена роль Уилла Скарлета — сводного брата Робин Гуда и участника шайки веселых разбойников, руководимой Малышом Джоном.
 
Образ же легендарного героя средневековых баллад закреплен за Тэроном Эджертоном («Kingsman: Секретная служба», «Эдди Орел»)
 
Постановщиком картины выступит Отто Баферст, приложивший руку к криминальной теледраме «Острые козырьки». Сценарий написал Джоби Харольд, ответственный за текст для «Меча короля Артура» Гая Ричи.
 
По своему духу фильм будет отсылать к «Темному рыцарю» и расскажет о том, как Робин Гуд по возвращении домой после крестовых походов обнаруживает Шервуд охваченным коррупцией и злом. Впоследствии он собирает группу находящихся вне закона персонажей, дабы взять ситуацию под контроль.</p>
</div>
 
<div class="tri">
<h4>3</h4>
<p>Ему предложена роль Уилла Скарлета — сводного брата Робин Гуда и участника шайки веселых разбойников, руководимой Малышом Джоном.
 
Образ же легендарного героя средневековых баллад закреплен за Тэроном Эджертоном («Kingsman: Секретная служба», «Эдди Орел»)
 
Постановщиком картины выступит Отто Баферст, приложивший руку к криминальной теледраме «Острые козырьки». Сценарий написал Джоби Харольд, ответственный за текст для «Меча короля Артура» Гая Ричи.
 
По своему духу фильм будет отсылать к «Темному рыцарю» и расскажет о том, как Робин Гуд по возвращении домой после крестовых походов обнаруживает Шервуд охваченным коррупцией и злом. Впоследствии он собирает группу находящихся вне закона персонажей, дабы взять ситуацию под контроль.</p>
</div>
  
</div>
 
<div id="footer"></div>
CSS
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
body {
                                        background: #151515;
                                        margin: 0;
}
 
#head {
    background-color: #000000;
    height: 35px;
    width: 100%;
    clear:both;
}
 
#logo {
    margin-top: 30px;
    margin-left: 100px;
}
 
#main-text p {
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    margin-top: 20px;
    margin-left: 100px;
    font-weight: 400;
    font-size: 13px;
    color: #00D900;
}
 
  
  #niz {
    width: 100%;
    margin-top: 80px;
}
 
h4, p {
    font-size: 12px;
    font-family: Gill Sans, sans-serif; 
    color: #999;
    text-align: left;
}
 
 
.odin {
  float: left;
    width: 33%;
}
 
.dva {
  float: left;
    width: 33%;
}
 
.tri {
  float: right;
    width: 33%;
}
 
#footer {
    background-color: #000000;
    height: 35px;
    width: 100%;
    clear:both;
  }
Такой вариант на большинстве сайтов. Однако мне не понятно почему 33%? Ведь вся длина страницы 100%. Получается 1% какой-то косяк да вызовет. А если делать 33% по бокам и 34% посередине то когда изменится разрешение страницы до размеров мобильного экрана то они все встанут вертикально и 1% из 34% наверняка какой-то косяк выдаст.

И напоследок вопрос. Почему ни один из крупных сайтов не используют flexbox?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
20.09.2016, 20:26
Ответы с готовыми решениями:

Разделить GridLayout на равные части
Как разделить GridLayout на 2х2, чтобы компоненты, которые лежат в ячейках имели размер 1/2 высоты и 1/2 ширины Layout, (если просто...

Разделить картинку на равные части
Доброго всем суток! Помогите разделить изображение 100х100 на кусочки 10х10. Я загружаю картинку из выбранной папки в PictureBox на...

Разделить список на равные части, сохранив порядок
У меня есть отсортированный по возрастанию список, например Нужно узнать, возможно ли разделить его на 5 равных частей, в каждой...

6
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
20.09.2016, 20:35
Цитата Сообщение от YUELA Посмотреть сообщение
Однако мне не понятно почему 33%? Ведь вся длина страницы 100%. Получается 1% какой-то косяк да вызовет.
Обычно делают 33.33%
Цитата Сообщение от YUELA Посмотреть сообщение
И напоследок вопрос. Почему ни один из крупных сайтов не используют flexbox?
Из-за кроссбраузерности, во-первых... А во-вторых, большинство крупных сайтов писалось задолго до появления flexbox, а сейчас особой потребности переписывать их нет...
0
0 / 0 / 0
Регистрация: 26.10.2015
Сообщений: 3
21.09.2016, 08:57  [ТС]
Цитата Сообщение от Fedor92 Посмотреть сообщение
Обычно делают 33.33%
И какой в этом смысл, если всё равно нет равномерного распределения?

Кстати, почему на амазоне на вид два одинаковых блока (не следует понимать буквально) сделаны по разному?
BENEFITS (искать через ctrl+f)
через float:left с width
https://www.amazon.com/BaBylis... B005OHZ478

34-Piece Security Bit Set (искать через ctrl+f)
через таблицу
https://www.amazon.com/TEKTON-... 668&sr=1-2
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
21.09.2016, 09:16
Цитата Сообщение от YUELA Посмотреть сообщение
если всё равно нет равномерного распределения
Конкретно вы можете указывать ширину блока в 33.3333333333%. Такое распределение будет равномерным? Для всех остальных, достаточно 33.33%, такие вот уж мы, неточные.

По ссылкам я не нашел про какие вы блоки говорите, вы бы лучше картинки приложили, а то эти утренние ctrl+f квесты...
Если данные табличные, они верстаются через таблицу. Если не табличные - блоками.
0
0 / 0 / 0
Регистрация: 26.10.2015
Сообщений: 3
21.09.2016, 09:42  [ТС]
Цитата Сообщение от mrtoxas Посмотреть сообщение
Такое распределение будет равномерным?
Нет конечно. Нужны 3 одинаковых по ширине блока, и не знаю что тут непонятного.

Цитата Сообщение от mrtoxas Посмотреть сообщение
По ссылкам я не нашел про какие вы блоки говорите, вы бы лучше картинки приложили, а то эти утренние ctrl+f квесты...
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
21.09.2016, 10:21
У нас с вами, наверное, разные калькуляторы. Посмотрите на вашем, чему равно 100 разделить на 3.

Добавлено через 19 минут
А насчет ссылок, я не вижу причин там использовать таблицы. Или разработчикам просто так захотелось, или какие-то причины были, но знают об этом только они
0
11 / 11 / 2
Регистрация: 02.02.2016
Сообщений: 44
21.09.2016, 11:11
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div class="wrap">
  <div class="block-0"></div>
  <div class="block-1"></div>
  <div class="block-2"></div>
</div>
* {
  box-sizing: border-box;
 
  &:before,
  &:after {
    box-sizing: border-box;
  }
}
 
.wrap {
  width: 100%;
  background: gray;
  padding: 15px;
  // 1-
  overflow: hidden;
  //3-
  // display: flex;
  //4-
  // display: table;
  
  // 1-
  // div[class^='block-'] {
  //   float: left;
  //   width: calc(100% / 3);
  //   height: 100px;
  // }
  
  //2-
  // div[class^='block-'] {
  //   display: inline-block;
  //   margin-right: -.32em;
  //   width: calc(100% / 3);
  //   height: 100px;
  // }
  
  //3-
  // div[class^='block-'] {
  //   width: calc(100% / 3);
  //   height: 100px;
  // }
  
  //4-
  div[class^='block-'] {
    display: inline-block;
    //or
    display: table-cell;
    width: calc(100% / 3);
    height: 100px;
  }
  
  .block {
    &-0 {
      background: red;
    }
    &-1 {
      background: green;
    }
    &-2 {
      background: blue;
    }
  }
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
21.09.2016, 11:11
Помогаю со студенческими работами здесь

Разделить вложенный список на примерно равные части
Здравствуйте, как мне разделить вложенный список на примерно равные части? Допустим есть list = ,,,,,,] Таких вложенных документов...

Как разделить txt файл на равные части?
У меня есть txt-файл:). Вот его нужно разделить на равные части. Например, ра 30 частей, чтобы во всех было равное количество строчек. Что...

Дана строка. Необходимо разделить ее на две равные части
Дана строка. Необходимо разделить ее на две равные части (если длина строки — четная, а если длина строки нечетная, то длина первой части...

Разделить рабочий стол на 3 равные части и крайние заполнить квадратами
Помогите пожалуйста с решением :) Написать программу, разделяющую рабочее окно вертикальными линиями на три равные части и заполняющую...

Разделить выпуклый многоугольник на 4 равные части двумя взаимно перпендикулярными прямыми
Есть некоторый выпуклый многоугольник, который необходимо разделить на 4 равные части двумя взаимно перпендикулярными прямыми. Входные...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru