Question

我正在使用flexbox。我有10个div，我希望尽可能地彼此缠绕，而不留下任何空间。

我想要做的是在“1”的右侧开始“4”而不是向下进入另一行。我该怎么做呢？任何jquery插件，使这更容易？我想知道这样做的基本知识，但不必依赖插件。

.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与class＆＃34; container＆＃34;，是您想要的确切宽度。

基本原则：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;
}

由于我并不完全确定您希望盒子如何拆分，因此应该为您提供一个基线，以便根据需要操作它。

如何将Div's包裹在一起

1 个答案: