Гибкость: сделать ребенка того же роста абсолютным братом или сестрой - PullRequest
Новая
       42

Гибкость: сделать ребенка того же роста абсолютным братом или сестрой

0 голосов
/ 06 августа 2020

Я должен создать раздел с двумя половинками div с одинаковой высотой, но первый должен находиться внутри контейнера, а другой снаружи, как в этом эскизе: image 

.bg-cyan {
  background-color: cyan;
}

img {
  max-width: 100%;
}

.right-half {
  right: 0;
  left: 50%;
  border: 2px solid purple;
}

.container {
  border: 2px solid red;
}

.col-6 {
  flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">


<section class="position-relative bg-cyan">
  <div class="container position-static p-0">
    <div class="row align-items-stretch">
      <div class="col-6">
        <h4 class="text-secondary mb-6">This col must be the same height of sibling absolute -></h4>
        <h3>Staying inside the container</h3>
        <ul>
          <li>Lorem ipsum dolor sit ame;</li>
          <li>Lorem ipsum dolor sit ame;</li>
          <li>Lorem ipsum dolor sit ame;</li>
          <li>Lorem ipsum dolor sit ame;</li>
          <li>Lorem ipsum dolor sit ame;</li>
        </ul>
      </div>
      <div class="col-6 position-absolute right-half p-0">
        This is absolute positioned because the layout require the image to go outside of container until the page end, with no height setted because of responsive and dynamism.
        <img src="https://picsum.photos/956/870">
      </div>
    </div>
  </div>
</section>

1 Ответ

0 голосов
/ 06 августа 2020

Я думаю, вам не нужно делать правую часть абсолютной, просто используйте саму функцию flexbox. Попробуйте это: 

.bg-cyan {
  background-color: cyan;
}

img {
  max-width: 100%;
}

.right-half {
  right: 0;
  left: 50%;
  border: 2px solid purple;
}

.container {
  display: 'flex';
  border: 2px solid red;
  flex-direction: 'row';
}

.col-6 {
  flex: 1;
  align-self: 'auto';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">


<section class="position-relative bg-cyan">
  <div class="container position-static p-0">
    <div class="row align-items-stretch">
      <div class="col-6">
        <h4 class="text-secondary mb-6">This col must be the same height of sibling absolute -></h4>
        <h3>Staying inside the container</h3>
        <ul>
          <li>Lorem ipsum dolor sit ame;</li>
          <li>Lorem ipsum dolor sit ame;</li>
          <li>Lorem ipsum dolor sit ame;</li>
          <li>Lorem ipsum dolor sit ame;</li>
          <li>Lorem ipsum dolor sit ame;</li>
        </ul>
      </div>
      <div class="col-6 p-0">
        This is absolute positioned because the layout require the image to go outside of container until the page end, with no height setted because of responsive and dynamism.
        <img src="https://picsum.photos/956/870">
      </div>
    </div>
  </div>
</section>
...