在flexbox中遇到障碍,将一个div放置在另一个下,同时将三分之一保持在侧面

这是CSS,来自媒体查询,全部显示:flex

video {
  height: 800px;
  width: auto;
}

.info {
  order: 2;
  border: 0.5 px solid #f7f7f7;
  background: white;
  width: 566.03px;
  height: max-content;
  position: relative;
}

.video-div {
  border: 0.5 px solid #f7f7f7;
  background: white;
  width: 566.03px;
  order: 1;
}

.interaction {
  order: 3;
  border: 0.5 px solid #f7f7f7;
  background: white;
  width: 566.03px;
  height: max-content;
}

.middle {
  height: 569px;
}
<main>
  <div> First div</div>
  <div> Second div</div>
  <div> Third div</div>
</main>

This is where I am.我需要将突出显示的div移动到第二个div(小的一个“ therock” div)下。

zhuangwei519 回答:在flexbox中遇到障碍,将一个div放置在另一个下,同时将三分之一保持在侧面

您可以使用flex轻松实现这一目标。 在下面的示例中,有一个主div,其中flex-direction设置为row。右列与display: flex列一起设置为flex-direction。这样将水平的主子级和垂直的子级堆叠。

html,body {
  height: 100%
}
.main {
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.left {
  background: lightblue;
}

.right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: pink;
}

.fill {
  flex-grow: 1;
  background: yellow;
}
<div class="main">
  <div class="left"><img src="https://via.placeholder.com/150" /></div>
  <div class="right">
    <div>Blah blah blah</div>
    <div class="fill">More blah blah</div>
  </div>
</div>

本文链接:https://www.f2er.com/3026984.html

大家都在问