如何将3D div移动到第一个div旁边？

Question

我有一个包含三个

的

元素。

我希望我的第三个

在第一个

旁边，第二个

在第一个

下面。
请查看这张图片： 我想要像这张图片一样的效果： 我已经使用了flex属性，但是我的第二个

会被第三个

覆盖。

#container{
    background-color: #fff;
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
}

#n1{
      width: 20%;
      order: 1;
      height:150px;
      background-color:yellow;
}

#n2{
      width: 20%;
      order: 3;
      clear:right;
      height:180px;
      background-color:green;
}

#n3{
      width:80%;
      order: 2;
      height:500px;
      background-color:red;
}

<div id="container">
    
    <div id="n1">
    n1 text...
    </div>
    
    <div id="n2">
    n2 text...
    </div>
    
    <div id="n3">
    n3 text...
    </div>
</div>    

请注意：

1. 我无法访问HTML，只能使用CSS。
2. 我不能使用绝对定位，因为第三个div的高度不固定。

- Sadegh

---

flexbox 不是一个网格系统，因此通常不使用 flexbox 来完成这个任务... - kukkuz

Answer 1

作为flexbox的替代方案，您可以使盒子浮动：

#container {
    background-color: #fff;
    padding: 50px;
}
#n1 {
    float: left;
    width: 20%;
    height:150px;
    background-color:yellow;
}
#n2 {
    clear: left;
    float: left;
    width: 20%;
    height:180px;
    background-color:green;
}
#n3 {
    margin-left: 20%;
    width:80%;
    height:500px;
    background-color:red;
}

Fiddle: https://jsfiddle.net/9whj3rL6/3

- Johann Kratzik

Answer 2

如果您想使用 Flexbox 来实现此目的，您可以在 flex 容器上设置固定高度，然后使用 flex-direction: column。然后，您只需要将红色 div 设置为占据整个高度，它就会自动进入右侧列。

* {
  box-sizing: border-box;
}
#container {
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 500px;
}
#n1 {
  width: 20%;
  height: 150px;
  background-color: yellow;
}
#n2 {
  width: 20%;
  height: 180px;
  background-color: green;
}
#n3 {
  width: 80%;
  flex: 0 0 100%;
  background-color: red;
}

<div id="container">
  <div id="n1">
    n1 text...
  </div>
  <div id="n2">
    n2 text...
  </div>
  <div id="n3">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias fugiat, aspernatur harum tempora repellat itaque explicabo facere impedit cumque ipsum ducimus sunt, officia autem, sit alias mollitia modi suscipit atque voluptatibus necessitatibus exercitationem! Voluptate veritatis sint facere ratione dolore, itaque mollitia quod tempore fuga beatae quis, velit reiciendis odio consectetur, voluptatem consequuntur consequatur reprehenderit suscipit autem ipsum ullam dolor modi. Adipisci aut voluptatibus architecto quo est voluptatem necessitatibus quia, voluptates quaerat commodi, perferendis minus! Quos eligendi dolore sapiente id iste reiciendis ab minus esse, excepturi, expedita vitae labore dolorem non atque maiores perspiciatis omnis adipisci! Natus qui quas obcaecati sapiente. Nesciunt veniam commodi quia dolor fugit sapiente repellendus reiciendis odio facilis iste expedita impedit maiores, voluptatibus doloribus optio quidem, tempora sequi magni quo. Cum amet magni, distinctio pariatur, cupiditate dignissimos veniam blanditiis laboriosam alias sunt deserunt et reiciendis perferendis consectetur natus. Voluptatum maiores omnis nihil delectus non aliquam possimus inventore quos tempore! Vel earum sit molestias ipsa, neque commodi delectus distinctio expedita hic esse ratione tempora animi provident officia vitae fugit libero quam explicabo nam qui, alias reiciendis aliquam suscipit beatae. Corporis nihil asperiores doloremque perferendis, rerum impedit incidunt, sequi vero cumque, officia tenetur! Alias sapiente enim ad reprehenderit, nulla aliquam consectetur expedita officia itaque error asperiores commodi quae sed provident minus libero. Assumenda, excepturi. Cum deserunt, eaque sequi. Nemo saepe, quas molestiae quibusdam ipsum at ducimus. Esse repellat nihil ipsa eaque, nobis facilis sint eius consequatur harum, neque maxime reiciendis consectetur, nostrum cupiditate laudantium non quisquam labore quas, iste porro nam perspiciatis hic voluptatem. Atque expedita dignissimos illo dolorum facilis impedit! Et molestias ut veniam! Provident perferendis, ex ipsa magnam, ipsum delectus. Unde, laudantium sunt nulla ad id doloribus minima molestias, pariatur nostrum consequuntur atque alias accusamus asperiores ullam labore voluptatibus repellat quod. Eaque dolor, nostrum labore, fugiat in repellendus expedita modi quia, libero dolore quam soluta repudiandae cupiditate rerum voluptates! Earum architecto mollitia debitis dolore excepturi consequuntur incidunt provident ab non dicta nobis, asperiores, rerum quis odit, eaque eius natus ea impedit esse accusantium id! Illum necessitatibus, rem dolorum! Itaque nobis eos, magni repellat ducimus harum accusantium facere, necessitatibus, iste laudantium quasi! Libero veritatis mollitia repellendus eum facilis possimus nihil dignissimos praesentium ea? Alias aliquid fugit magni animi incidunt porro dolorem, sapiente omnis sunt illo. Ipsum debitis, soluta aliquid assumenda distinctio illum ab! Nulla eos, sunt praesentium accusantium architecto, maiores nostrum. Itaque quibusdam nulla, reiciendis quo adipisci corrupti.
  </div>
</div>

- Nenad Vracar

---

谢谢你的回答。但是正如我之前提到的，我的3D div高度是可变的，所以我不能设置固定高度。 - Sadegh

谢谢。但这是问题所在：我的3D div高度是自动的（因为它的内容是由用户生成的），我无法为其设置固定高度。 - Sadegh

我用flex: 0 0 100%;更新了答案，你可以尝试一下。 - Nenad Vracar

非常感谢，但如果容器有固定的高度，它将起作用，否则它不起作用。 - Sadegh