Просмотр темы - Как расположить три дива в одну строку • Форум поддержки сайта zvirec.com

 




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

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 946
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Habilis писал(а):
У меня следующий проект. Нужно расположить три различных картинки в одну строку.

Я бы не стал называть раскладку трёх картинок проектом. Слишком громко, для столько пустякового дела :)
Ниже выкладываю написанный вами и облагороженный мной код :) Сделал "резиновый" вариант, только при это нужно помнить, что слишком большие тексты для такого варианта не приемлемы, т.к. не влезут в контейнер.
И кстати, если вы сами не понимаете, что делаете, то может вам нанять того, кто сделает всё за вас? А если с финансами проблемы, то в интернете куча курсов по вёрстке (некоторые я вам когда-то скидывал). А то смотрю с мат.частью у вас проблемы.
И с прошедшим ДНЁМ ПОБЕДЫ! У меня дед тоже воевал, был ранен на Курской дуге.


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

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


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

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


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

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

https://yadi.sk/d/9mO0U3yz3VjYuE


Всем большое спасибо и удачи :)

Добавлено спустя 57 минут 21 секунду:
Юрий. Спасибо вам большое :) Ваша вёрстка естественно лучше. С технологией резиновой вёрстки я не знаком. И в ослике не отображается вообще (: Что делать ???


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

Зарегистрирован: 09 мар 2010, 00:53
Сообщений: 4067
Репутация: 2834
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Habilis, посмотрел вашу последнюю работу - замечаний много и писать долго. Но про одно напишу.
В коде есть три строки типа margin: 50px 300px 200px -230px;.
Это не нормальные числа, тем более с минусом. Трудно представить как вы их определили.
Попробуйте для начала каждую такую строку заменить на margin: 30px; или не 30, а что-то похожее. Но ни как не 300.

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


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

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 946
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Сергей, зачем вы создаёте кучу селекторов с одинаковыми правилами?
Код:
.t3d1 {
  width: 586px;
  height: 728px;
  margin: 50px 300px 200px -230px;
  perspective: 1000px;
}
.t3d2 {
  width: 570px;
  height: 728px;
  margin: 50px 100px 200px -260px;
  perspective: 1000px;
}
и т.д.

Это можно и нужно сделать с помощью все лишь одного селектора.
А если, предположим, у вас будет сто, двести блоков, вы будете дублировать код для каждого? А если у этих блоков вдруг нужно будет изменить размеры, что делать будете?
Ещё раз говорю - УЧИТЕ ОСНОВЫ! Без этого никуда. Пример того, что вам нужно, я давал. Используйте. Размеры можете сделать фиксированными, если не нужны резиновые. Просто задайте свойство width для главного контейнера, убрав при этом min и max width.

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


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

Зарегистрирован: 03 сен 2010, 17:56
Сообщений: 550
Пол: мужской
Репутация: 374
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Юрий. Вы наверное невнимательно смотрели код. У меня для каждого блока различная ширина, поэтому и правила разные. С помощью флекс технологии это как-то делается сейчас я её и изучаю :-)
Ещё при помощи этой же технологии при уменьшении окна браузера блоки стоют в колонку. Это тоже я сейчас изучаю. За Флекс спасибо это мощная штука :-)

Добавлено спустя 2 минуты 25 секунд:
Vladis согласен накосячил. До этого сайт делал в конструкторе, там было проще. А сейчас рискнул сделать на чистом html и css.


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

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 946
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Habilis писал(а):
У меня для каждого блока различная ширина, поэтому и правила разные.

И это не повод копировать весь блок правил. Общие, для всех блоков, правила выносятся в один общий селектор. К остальным можно обращаться добавляя к каждому элементу отдельный класс:
Код:
<div class=''t3d item-1">...</div>
<div class=''t3d item-2">...</div>
<div class=''t3d item-3">...</div>
и т.д.

Таким образом общие, для всех блоков, правила заданы для селектора t3d. А индивидуальные правила уже добавляются в селекторы item-1...item-100.
Но если элементы являются детьми одного родителя, то проще использовать псевдокласс nth-child(). В скобках пишем номер элемента в потоке. Пример:
Код:
.t3d:nth-child(3) {...}

Обратились к третьему ребёнку. И в html не надо лазать.

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


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

Зарегистрирован: 03 сен 2010, 17:56
Сообщений: 550
Пол: мужской
Репутация: 374
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Всем добрый вечер :) Да мощная штука этот флекс. Вот какой проект я соорудил по этой технологии. https://yadi.sk/d/UIEGWKpF3Vtb8A Во всех браузерах кроме ИЕ он хорошо просматривается. Для ИЕ нужны какие-то костыли, но какие я не знаю (: Но тут есть маленькая заковыка. Для того, чтобы дивы выстроились в один ряд при уменьшении окна браузера и чтобы было между ними расстояние я задал большую высоту родительскому блоку, тогда всё получается. Но на декстопе много свободного места. Нельзя ли сделать так, чтобы на декстопе было немного свободного места по высоте но при уменьшении окна браузера оно увеличивалось. Или нужно опять прибегать к медиа запросам. И ещё у меня один вопрос. До ширины окна браузера 450 рх картинки ведут себя нормально.
Но вот при ширине окна меньше 450 рх они уменьшаются и это не есть айс. Нельзя ли сделать так, чтобы при уменьшении окна браузера картинки тоже соответственно уменьшались. И при ширине окна 300 рх они бы затем не меняли размер.

P.S. - кто будет смотреть мой код не обращайте пожалуйста внимание на комментарии. Мне это трудно даётся.
P.S.2 - о селекторах я тоже не очень заботился. Потом причешу.


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

Зарегистрирован: 09 мар 2010, 00:53
Сообщений: 4067
Репутация: 2834
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как расположить три дива в одну строку
Habilis писал(а):
... нужно опять прибегать к медиа запросам...
Меди-запросы для этого и придуманы. Ещё один вариант при помощи javascript в зависимости от размеров окна или экрана менять свойства картинок и других элементов, но это не есть гуд.

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


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

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

А как тут высота родителя влияет на его ширину и следовательно на вместимость дочерних элементов? :)
В IE11, кстати, работает flex. Но, порой не так, как хотелось бы ;)

Habilis писал(а):
при ширине окна меньше 450 рх они уменьшаются и это не есть айс. Нельзя ли сделать так, чтобы при уменьшении окна браузера картинки тоже уменьшались

Тут я вообще ничего не понял :) Картинки должны уменьшаться или нет? :lol: Если должны, то картинкам задайте свойство max-width: 100%. А минимальный порог ширины можно установить с помощью свойства min-width.
Я уже давал вам свой код, где картинки как раз уменьшаются, если им не хватает места. И min-width там упомянуто. Но, как я погляжу, вы его вообще не изучали. В который раз мусолим сто раз пройденное.

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


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

[ На страницу: 1, 2 ]

в форуме DREAMWEAVER

Евгений333

12

3352

24 июн 2014, 09:46

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

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

в форуме CSS И ВЕРСТКА

It'sMe

0

936

11 янв 2011, 10:49

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

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

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

ARGR

7

2092

01 авг 2013, 20:46

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

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

в форуме JAVASCRIPT

Ilya

2

1988

23 мар 2012, 17:56

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

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

в форуме HTML

vasava-net

7

2058

12 сен 2009, 14:27

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


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

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


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

Перейти:  
 cron