VladimirZhid
@VladimirZhid
Нравится делать что-то интересное и полезное.

Как узнать высоту элемента с Position=Absolute?

Здравствуйте товарищи! Столкнулся с проблемой...
Имеется примерно такой код:
<div id="phather2">
  <div id="child2_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut earum sunt illum ad rerum delectus optio voluptates distinctio, perspiciatis maxime quis et adipisci, nemo ipsa laborum ex fuga consequuntur quae.</div>
   <div id="child2_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic eos, nobis voluptatibus praesentium magni id asperiores enim nemo voluptas! Tempore possimus, dolorum quos harum velit et maiores atque molestiae eum.</div>
</div>

#child2_1{
  float:left;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  left: -51%;
}
#child2_2{
  float:right;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

Как вы понимаете сочетание Float и Relative невозможно... А надо чтобы первый .child2_1 сдвигался в сторону и освобождал место для child2_2.

Варианты и их проблемы:
Вариант 1
Элементы выстраиваются в один ряд за счет float (left и right), тогда я не смогу сдвинуть левую колонку из зоны видимости.
Вариант 2
Элементы выравниваются за счет position:relative для child2_1 и position: absolute для child2_2. Тогда высота родителя будет считаться только по высоте div.child2_1, а это никак не респонсив.
Вариант 3
Сдвигаться будет родительский элемент. В таком случае я не могу использовать сетку bootstrap для детей, а это обязательное условие.

Подумав, я решил что лучшим решением будет вариан №2...

А вопрос состоит так:
1) Правильно ли я все понял?
2) Помогите с решением выяснения высоты у элемента с абсолютным позиционированием... может есть какие-нибудь решения или скриптики... сколько искал, так ничего и не нашел в интернете.

ЗАРАНЕЕ, ОГРОМНОЕ СПАСИБО ЗА ПОМОЩЬ!
*** извиняюсь за некоторую сумбурность и капс.
  • Вопрос задан
  • 352 просмотра
Решения вопроса 2
julia_amake
@julia_amake
Front-end разработчик
Вместо float использовать inline-block, тогда блоки спокойно идут друг за другом и, в то же время, вы можете их двигать куда пожелаете через position: relative
jsfiddle.net/e13z69yr/1
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
15 июл. 2020, в 11:37
1500 руб./за проект
15 июл. 2020, в 11:30
12000 руб./за проект
15 июл. 2020, в 11:05
100000 руб./за проект