Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.04.2018, 11:13
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Независимые блоки
Здравствуйте, уважаемые форумчане!
Я работаю frontend разработчиком, опыт чуть более года, немало задач было решено, но с этой задачей я справится не смог...
Есть 2 блока, высота которых зависит от контента, а ширина равна 100% родителя, по дом структуре они "соседи".
По задумке один из них содержит картинку, второй наполнен текстом, при этом объём текста и высота картинки заранее нам неизвестны. Нужно их наложить друг на друга таким образом, чтобы родитель выбирал большего из двух детей, и принимал значение его высоты.
Например:
<div class="parent">
     <div class="image">тут будет img с картинкой</div>
     <div class="text">тут будет пара абзацев</div>
</div>

В результате мы должны получить "пару абзацев" на фоне картинки. Конечно вы сразу скажите дай блоку с классом "parent" position:relative, а блоку "image" position:absolute, и будете неправы. А что если ваша картинка занимает 600 по высоте, а текст всего 200? Ведь по условию задачи, при таком раскладе блок "parent" должен принять высоту в 600. А если текст 900 а картинка 300, "parent" примет высоту 900.
Самое интересное, что я могу решить эту задачу с помощью JS, однако в моей ситуации это недопустимо.
Прошу Вас помочь, ибо я уже сломал голову...
Ответить с цитированием
  #2 (permalink)  
Старый 05.04.2018, 11:27
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Если коротко - получается что родительский блок должен принимать высоту большего из двух дочерних блоков. При том что дочерние блоки наложены друг на друга.
Ответить с цитированием
  #3 (permalink)  
Старый 05.04.2018, 11:44
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,790

https://jsfiddle.net/eu38e1so/
Ответить с цитированием
  #4 (permalink)  
Старый 05.04.2018, 12:14
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Сообщение от Nexus Посмотреть сообщение
https://jsfiddle.net/eu38e1so/
Спасибо за ответ, вы первый кто предложил реальное решение, но беда в том что по условию задачи, дети занимают 100% ширины родителя)

p.s. пожалуйста прочтите внимательно первый пост
Ответить с цитированием
  #5 (permalink)  
Старый 05.04.2018, 12:15
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,790

Сообщение от kvizor34
но беда в том что по условию задачи, дети занимают 100% ширины родителя
50% на 100% не пробовали менять?
https://jsfiddle.net/3rm2p206/
Ответить с цитированием
  #6 (permalink)  
Старый 05.04.2018, 12:29
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Сообщение от Nexus
50% на 100% не пробовали менять?
Точно! я попробывал но только в одном месте, забыл сменить на 100% отрицательный марджин, благодарю Вас, как только внедрю это в свой проект, обязательно здесь отпишу!
Ответить с цитированием
  #7 (permalink)  
Старый 05.04.2018, 12:40
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Решить этот вопрос мне всё же удалось, благодоря примеру Nexus, и ещё одному человеку на другом форуме.
В итоге оба приёма используют отрицательное значение горизонтального марджина, первый пример использует flex для родителя, второй построен на свойстве float.
1 - https://jsfiddle.net/eu38e1so/26/
2 - https://jsfiddle.net/eu38e1so/24/

Большое тебе спасибо! Карму+

Думаю тема закрыта.
Ответить с цитированием
  #8 (permalink)  
Старый 05.04.2018, 13:59
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Ну если только ещё использовать сетку display: grid и наложить элементы друг на друга

https://jsfiddle.net/eu38e1so/36/

P. S. Пример с display: flex выше имеет побочный эффект: если не поддерживается в браузере, то текст уежает за экран и недоступен

Последний раз редактировалось Malleys, 05.04.2018 в 14:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавающие блоки - как прилеплять блоки низ/верх андрей1234 Элементы интерфейса 2 19.02.2018 19:48
Слайдер БЛОКИ на одной странице. roswebsoft Events/DOM/Window 3 12.10.2015 16:05
Показать скрыть блоки nurik2120 Элементы интерфейса 4 18.06.2013 10:59
Вопрос про появляющиеся блоки. Vladislav Библиотеки/Тулкиты/Фреймворки 3 15.06.2013 02:16
Jquery UI Tabs плодятся блоки при переключении между вкладками. Arey jQuery 12 05.09.2012 21:57