Ответить на тему  [ Сообщений: 20 ] 
На страницу 1, 2  След.
Как расположить три дива в одну строку 
Автор Сообщение
Опытный

Зарегистрирован: 03 сен 2010, 17:56
Сообщений: 560
Пол: мужской
Репутация: 374
Добавить пункт репутацииВычесть пункт репутации
Сообщение Как расположить три дива в одну строку
Всем добрый день. Столкнулся бы вроде с простой задачей. Нужно расположить три дива в одну строчку. Свойство margin не действует. Второй див остаётся почему-то всегда снизу. Знаю, что они находятся в общем потоке. Но как их из этого потока выдернуть.


06 май 2018, 14:57
Профиль Отправить личное сообщение
Модератор
Аватар пользователя

Зарегистрирован: 09 мар 2010, 00:53
Сообщений: 4093
Репутация: 2904
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Добрый день, Habilis!
Один из способов:
Код:
<html>
<head>
<title>3 columns</title>
<style>
#box {width: 300px;}
#div1 {background: #cde; float: left; width: 100px;}
#div2 {background: #edc; float: left; width: 100px;}
#div3 {background: #dec; float: left; width: 100px;}
</style>
</head>
<body>

<div id="box">
   <div id="div1">div1</div>
   <div id="div2">div2</div>
   <div id="div3">div3</div>
</div>

</body>
</html>
Если нужны просветы между колонками, то добавить колонкам margin, при этом уменьшить их width.
Другой способ - задать соответствующим дивам свойства display: table, display: table-cell и display: table-row. Получится аналог таблицы.
Есть и другие способы.

_________________
Не забывайте отдыхать!
www.jscan.ru - ежедневно новые японские сканворды и судоку различной сложности!


06 май 2018, 15:40
Профиль Отправить личное сообщение WWW
Опытный

Зарегистрирован: 12 дек 2011, 21:34
Сообщений: 556
Пол: мужской
Репутация: 1046
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Привет, Сергей!

Можете "перейти" на использование CSS Grid Layouts (тык один, тык два, тык три). Единственная проблема с нею на сегодняшний день - любимый 2-мя процентами всех пользователей сети Интернет Эксплорер (и Ёж) отображать её правильно не умеют (не хотят).

Код:
<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>


Стили:
Код:
.container {
  display: grid;
  grid-temlate-columns: repeat(3, 1fr);
  grid-gap: 15px;
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
}


Это самый простой пример, в котором установлено, что сетка должна содержать колонки (столбцы). Значение repeat говорит, что колонки должны повторяться 3 раза; при этом колонки должны быть одинаковы по ширине. Параметр grid-gap - это зазор между колонками размером в 15 пикселей. Плюс - я ограничил ширину контейнера 1200-ми пикселями...

Замечательность такой сетки состоит в том, что применяться она может к любым потомкам любого родителя. Не обязательно, чтобы это были дивы.

P.S. Если интересно, могу дать ссылку на простенькую заготовку, в которой используется css grid (я её делал, чтобы клиенту показать)...


06 май 2018, 17:12
Профиль Отправить личное сообщение
Опытный

Зарегистрирован: 03 сен 2010, 17:56
Сообщений: 560
Пол: мужской
Репутация: 374
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Vladis спасибо вам большое :) Ваш способ наиболее простой, поэтому буду использовать его :)

Добавлено спустя 5 минут 28 секунд:
Val_ery добрый вечер :) Зачем я буду заморачиваться с Grid если есть простой и удобный способ :) Недавно смотрел видео про Gulp может эта платформа и хороша, но только не для моих простеньких проектов. В последнее время я увлёкся созданием видео, если хочешь могу дать ссылку на свой канал на Ютубе :) За Brackets спасибо. Вот этот блокнотик мне нравится. Я активно его использую в своих проектах :-)


06 май 2018, 20:39
Профиль Отправить личное сообщение
Опытный

Зарегистрирован: 12 дек 2011, 21:34
Сообщений: 556
Пол: мужской
Репутация: 1046
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Habilis писал(а):
Зачем я буду заморачиваться с Grid если есть простой и удобный способ :)

Согласен, зря предложил :oops:


06 май 2018, 22:12
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 957
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Val_Ery писал(а):
Можете "перейти" на использование CSS Grid Layouts...

А для чего при такой простой задачи использовать Гриды? Есть смысл использовать grid, когда у нас два направления - горизонтальное и вертикальное (имхо).
Тут по моему flex-box был не законно забыт. Я бы лучше на нём всё реализовал, чем использовать флоат и фиксированную ширину. Да и поддержка flex-box больше, чем у grid :)

_________________
Не всё валидно, что не видно.


07 май 2018, 10:55
Профиль Отправить личное сообщение
Опытный

Зарегистрирован: 12 дек 2011, 21:34
Сообщений: 556
Пол: мужской
Репутация: 1046
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Hoto писал(а):
А для чего при такой простой задачи использовать Гриды? Есть смысл использовать grid, когда у нас два направления - горизонтальное и вертикальное (имхо).

Ну, на моё ИМХО гриды можно использовать вообще, где угодно. Вне зависимости от того, сколько там и каких направлений.


07 май 2018, 21:02
Профиль Отправить личное сообщение
Модератор
Аватар пользователя

Зарегистрирован: 09 мар 2010, 00:53
Сообщений: 4093
Репутация: 2904
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
И у меня имхо есть. Можно верстать как удобнее, но не забывать, что как всегда, не доведя до ума имеющееся, завтра придумают новое, а послезавтра отменят, сегодняшнее.

_________________
Не забывайте отдыхать!
www.jscan.ru - ежедневно новые японские сканворды и судоку различной сложности!


07 май 2018, 23:51
Профиль Отправить личное сообщение WWW
Опытный

Зарегистрирован: 03 сен 2010, 17:56
Сообщений: 560
Пол: мужской
Репутация: 374
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Господа большое спасибо вам за ответы. Буду рассматривать как ту так и другую технологию.
У меня следующий проект. Нужно расположить три различных картинки в одну строку.
Но картинки не простые, а со свойствами :)
Во вложении вы всё увидите.
С праздником Вас всех :D
У меня дед геройски погиб под Одессой, другой работал бригадиром на военном заводе, тоже чуть не погиб при диверсии.
Да и каждую семью опалила своим горячим дыханием война.

С ПРАЗДНИКОМ. И ПУСТЬ НЕ БУДЕТ БОЛЬШЕ ВОЙНЫ.

Добавлено спустя 8 минут 41 секунду:
ребята. Мне понравилась технология flex :-) Пара минут и дивы располагаются горизонтально :-) Мощная штука. Её и буду учить :-)


У вас нет доступа для просмотра вложений в этом сообщении.


09 май 2018, 22:16
Профиль Отправить личное сообщение
Модератор
Аватар пользователя

Зарегистрирован: 09 мар 2010, 00:53
Сообщений: 4093
Репутация: 2904
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Habilis, посмотрел я ваш код. Похоже, что не всё представляете, что делаете (как написано там). Вы каким браузером просматриваете свою верстку?
Может не знаете и тогда вам будет в помощь то, что во всех (почти) браузерах есть функции для разработчика.
FireFox - Меню - Инструменты - Веб-разработка
Опера - Меню - Разработка - Инструменты разработчика
Хрома - Меню - Дополнительные инструменты - Инструменты разработчика
И т. д...
Открываете в браузере свою страницу, выбираете в меню разработку, откроется новое окно или часть окна отделится. И вот тут, переходя по вкладкам, можно менять значения стилей и сразу видеть где чего сколько и на что это влияет.

_________________
Не забывайте отдыхать!
www.jscan.ru - ежедневно новые японские сканворды и судоку различной сложности!


10 май 2018, 00:54
Профиль Отправить личное сообщение WWW
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ Сообщений: 20 ]  На страницу 1, 2  След.
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме Как в меню сделать перенос текста на другую строку?

в форуме ФОРМИРОВАНИЕ СТРУКТУРЫ САЙТА И ВОПРОСЫ ПО ФУНКЦИОНИРОВАНИЮ СТАНДАРТНОЙ СБОРКИ JOOMLA

ARGR

7

2229

01 авг 2013, 20:46

Fatima Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Помогите убрать адресную строку из всплывающего окна...

в форуме JAVASCRIPT

Ilya

2

2051

23 мар 2012, 17:56

Beron Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме навигация сайта выводится в столбик, а надо в строку

в форуме ФОРМИРОВАНИЕ СТРУКТУРЫ САЙТА И ВОПРОСЫ ПО ФУНКЦИОНИРОВАНИЮ СТАНДАРТНОЙ СБОРКИ JOOMLA

MariAlex

9

2982

04 июн 2015, 19:54

MariAlex Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме кто знает как картинку вставить в в браузерную строку сайт

в форуме HTML

vasava-net

7

2109

12 сен 2009, 14:27

vasava-net Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме слетают картинки, в адресную строку добавляетс index.php

в форуме ФОРМИРОВАНИЕ СТРУКТУРЫ САЙТА И ВОПРОСЫ ПО ФУНКЦИОНИРОВАНИЮ СТАНДАРТНОЙ СБОРКИ JOOMLA

fastgidra@yandex.ru

2

1359

13 сен 2013, 12:45

fastgidra@yandex.ru Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти: