Держите относительно позиционированный дочерний элемент в пределах необходимого максимального родительского блока - PullRequest
Новая
       44

Держите относительно позиционированный дочерний элемент в пределах необходимого максимального родительского блока

0 голосов
/ 09 октября 2019

Существует html код https://jsfiddle.net/1t68bfex/

button {
  position: relative;
  top: 100px;
  left: 150px;
  max-top: 10px;
}

.third-party-block {
  //display: none;
}
<div style="border:1px solid red;">
  <button>
       The text from the left is beautiful
      </button>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>

Проблема здесь в том, что сторонний блок является динамическим, и если он не отображается, кнопка должна оставаться в верхней части. Верх: 100px следует изменить, если высота родительского элемента слишком мала.

Итак, я смотрю на что-то вроде эквивалентной максимальной ширины для ширины, но то же самое для моей ситуации. Чистое решение CSS * Требуется 1015 *.

1 Ответ

1 голос
/ 09 октября 2019

Вы можете рассмотреть использование flexbox для достижения этой цели: 

.container {
  border: 1px solid red;
  display: flex;
}

button {
  margin-top:10px;
  align-self:flex-end;
}
.button {
  order: 1;
  max-height:100px;
  display:flex;
}
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
        <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
  </div>
</div>
...