1

Есть пример, можно ли как-то с помощью css и js добиться того, чтобы правый нижний блок не выходил за нижнюю границу левого блока? Высота блоков гибкая, то-есть зависит от содержимого.

.left-block {
  float: left;
  margin: 10px;
  width: 40%;
  border-radius: 5px;
  display: block;
  align-items: center;
  border: 2px solid blue;
  word-wrap: break-word;
}

.right-block {
  float: right;
  margin: 10px;
  width: 45%;
  border-radius: 5px;
  display: block;
  align-items: center;
  border: 2px solid red;
  word-wrap: break-word;
}
<div class="left-block">
  some text blblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblb
</div>
<div class="right-block">
  else text blblblblblblblbllblblbllblblblblblblbl
</div>
<div class="right-block">
  to many text blblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblbblblblblblblblbllblb
</div>

1 ответ 1

1

Использовать длинное слово в качестве имитации контента не совсем корректно. Лучше использовать lorem<число слов> из плагина emmet, скачать его можно здесь, также он встроен в Visual Studio Code.

Чтобы правый блок не выходил за нижний край левого нужно всего лишь добавить для них родителя. Обратите внимание на блок .split

<body>
    <div class="container">
        <div class="split">
            <div class="left-block">
                <span>
                    LEFT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus distinctio dolorem repudiandae natus asperiores assumenda optio, odio omnis repellat voluptatem ducimus voluptates illum voluptatum repellendus quidem labore facere iure, facilis alias corporis, iusto quaerat reprehenderit! Ea rerum, iusto doloremque est eaque consectetur! Atque, ipsum suscipit sed ducimus, distinctio blanditiis perferendis ut, aspernatur earum eum obcaecati numquam non velit impedit. Est, consequatur illum necessitatibus dolore ea voluptate magni aliquid nihil voluptas laborum architecto numquam qui, delectus nisi dicta natus. Rerum error animi non iure velit quam et, cumque alias, quos accusamus repudiandae itaque, eaque rem dignissimos consequatur saepe natus ab quaerat?
                </span>
              </div>
        </div>
        <div class="split">
            <div class="right-block">
                <span>
                    RIGHT Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, facere?
                </span>
              </div>
              <div class="right-block">
                  <span>
                      RIGHT Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur facilis ipsa illo impedit, fugiat odio id? Mollitia animi molestiae recusandae perferendis. Nulla culpa cumque, quis reprehenderit incidunt, eveniet illum animi earum quo fuga quod ipsum? Non numquam explicabo possimus nam laboriosam praesentium, eum alias! Unde, culpa quam officiis ab animi reiciendis libero molestiae minus id nesciunt, soluta facere sequi odio nisi vel cupiditate? Amet dignissimos quae id asperiores facere ex, obcaecati ipsa? Ipsa vero deleniti dolore velit possimus blanditiis consequuntur voluptates? In, sequi labore. Laudantium similique, quidem qui doloribus tenetur dolor eum provident hic quo tempora dignissimos illo. Praesentium, veritatis!
                    </span>
              </div>
        </div>
    </div>
</body>

Будем использовать технологию flexbox. Зададим правила для их общего родителя

.container
{
    margin: 0 auto;
    width: 1366px;
    display: flex;
    justify-content: space-between;
}

.split
{
    width: 1366px;
    display: inline-block;
    border: 1px solid #000;
}

.left-block
{
    display: inline-block;
    width: 50%;
}

.right-block
{
    display: inline-block;
    width: 50%;
}

В результате сколько бы не добавлялся контент в правом блоке, он не выйдет за нижнюю границу левого.

Скрин результата

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.