如何将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;
}

由于我不能完全确定要如何拆分框，因此应该为您提供一个基线，以便根据需要进行操作。