如何將Div彼此包裹

Question

我正在使用flexbox。 我有10個div，它們都希望彼此盡可能地互相纏繞，而在兩者之間不留任何空間。

我想做的是讓“ 4”在“ 1”的右側開始，而不是向下一行。 我將如何去做呢？ 任何jquery插件可以使此操作更容易嗎？ 我想了解執行此操作的基本知識，盡管不必依賴插件。

https://jsfiddle.net/414yhvxd/

 .container{ display:flex; flex-wrap:wrap; flex-direction:row; height:900px; background:gray; max-height:900px; } .box{ color:white; font-size:30px; text-align:center; background:black; width:200px; height:200px; margin:2px; } .type1{ height:300px; } .type2{ width:500px; } .type3{ height:40px; width:50px; } .type4{ height:600px; } 

 <div class="container"> <div class="box type1">1</div> <div class="box type2">2</div> <div class="box">3</div> <div class="box type3">4</div> <div class="box">5</div> <div class="box type4">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> <div class="box">10</div> </div> 

Answer 1

您應該將要彼此相鄰的每個部分分成不同的div容器。 您還需要確保容器div（類為“容器”的div）是您想要的確切寬度。

基本原理： https ： //jsfiddle.net/414yhvxd/1/

<div class="container">
  <div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
  <div>
    <div class="box type3">4</div>
    <div class="box">5</div>
    <div class="box type4">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</div>  

.container{
   display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  height:900px;
  background:gray;
  max-height:900px;
}

.box{
  color:white;
  font-size:30px;
  text-align:center;
  background:black;
  width:200px;
  height:200px;
  margin:2px;
}
.type1{
  height:300px;
}
.type2{
  width:500px;
}
.type3{
  height:100px;
  width:50px;
  }
.type4{
  height:600px;
}

由於我不能完全確定要如何拆分框，因此應該為您提供一個基線，以便根據需要進行操作。