+ Ответить в теме
Показано с 1 по 2 из 2

Тема: Не могу сверстать 2 дива горизонтально, чтоб 2й был "резиновым"

  1. #1
    Новичок АндрейБ на пути к лучшему Аватар для АндрейБ
    Регистрация
    30.08.2019
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Не могу сверстать 2 дива горизонтально, чтоб 2й был "резиновым"

    Приветствую всех!
    Уже битый день не могу сверстать, чтоб 2 дива были горизонтально, с некоторыми условиями. Может кто сможет помочь?

    Приведенный html приведен просто для наглядности задачи. Переверстать можно и на дивах и на table и на ul - не принципильно. Лишь бы работало.
    В реальной верстке марджин и цветных бордеров нет. Они в примере приведены просто для наглядности.

    Итак условия:
    - левый синий див не имеет фиксированной ширины/высоты, то есть из-за его содержимого он может менять как свою высоту так и ширину. Но они точно не больше 50% экрана.
    - правый зеленый див должен занимать оставшуюся правую часть не вылезая за экран вправо.
    - он же (правый зеленый див) не имеет фиксированной высоты, так как при длинном тексте должен быть перенос на новую строку и див будет увеличиваться в по высоте
    - верхние грани синего и зеленого дива прижаты вверх к красному контейнеру
    - высота красного контейнера должна быть максимальной из двух высот внутренних дивов
    - (Самое сложное). Внутренний текст в правом зеленном диве потенциально может быть очень длинным и не иметь пробелов! ))

    Хотелось бы решить это просто версткой, без JS.

    Заранее благодарен!


    <html>
    <head>

    <style>
    div {
    margin: 3px;
    }
    .red {
    border: 1px solid red;
    display: flex;
    }
    .blue {
    border: 1px solid blue;
    }
    .green {
    border: 1px solid green;
    }
    </style>

    </head>
    <body>

    <div class="red">
    <div class="blue">heregoestime<div>one more</div></div>
    <div class="green">heregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptioeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregon</div>
    </div>

    </body>
    </html>

  2. #2
    Местный Degradator скоро придёт к известности Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    2,056
    Thanks
    141
    Thanked 153 Times in 153 Posts
    .red {
    border: 1px solid red;
    display: flex;
    }
    .blue {
    border: 1px solid blue;
    max-width: 50%;
    word-wrap: break-word;
    }
    .green {
    border: 1px solid green;
    word-break: break-word;
    }

+ Ответить в теме

Похожие темы

  1. Как сделать "резиновым" блок div
    от AndreyXX в разделе HTML
    Ответов: 13
    Последнее сообщение: 05.06.2014, 19:32
  2. Как сделать "резиновым" блок div
    от AndreyXX в разделе Помогите!
    Ответов: 2
    Последнее сообщение: 17.12.2013, 03:09
  3. Ответов: 3
    Последнее сообщение: 21.12.2012, 20:00
  4. Ответов: 1
    Последнее сообщение: 01.07.2012, 01:36
  5. Ответов: 2
    Последнее сообщение: 16.07.2010, 08:51

Социальные закладки

Социальные закладки

Ваши права

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