html - 容器内的全宽 div 和柔性行

Question

我在容器的引导行中有 3 个元素。我需要以这样的方式定位元素，即第一个元素保持完整的视口(viewport)宽度，而其他 2 个元素并排保持在容器宽度内。第一个元素处于绝对位置，因为它将用作容器的背景。我怎样才能做到这一点？

这是我的html

<div class="container">
  <div class="row d-flex align-items-center">
    <div id="particles-js"></div>
    <div class="col-md-7 col-lg-6 slider-content"></div>
    <div class="col-md-5 col-lg-6 text-end slider-content"></div>
  </div>
</div>

和样式

#particles-js{
  position:absolute;
  width: 100vw;
  height: 100%;
}

我该怎么做？提前致谢

Answer 1

我不确定我是否清楚地理解你的问题，但你的意思是这样的吗？

<div class="container">
  <div class="row d-flex align-items-center">
    <div id="particles-js"></div>
    <div class="inner-container">
        <div class="col-md-7 col-lg-6 slider-content"></div>
        <div class="col-md-5 col-lg-6 text-end slider-content"></div>
    </div>
  </div>
</div>

做

#particles-js{
  position:absolute;
  width: 100vw;
  height: 100%;
}

.inner-container{
  display:flex;
}

.slider-content{
  width:50%;
}