Question

这是关于在1 div中嵌套4个div（正方形），这是4个div的一部分......

我在包装器中使用display: flex以及包装物品本身，否则它将无效

对我而言，这感觉就像一个糟糕的黑客，但我尽量不使用浮动。你会如何处理这个话题？

以下是JSBIN上的演示。

这是HTML代码：

<body>
<div>
  <div id="DIV">
    <div id="div1_inside_div" style="border:none">
      <div id="div2_inside_div1" style="border: none;">
        <div id="div3_inside_div2" style="border: none;">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div> 
          </div>
        <div>2</div>
        <div>3</div>
        <div>4</div>   
        </div>
      <div>2</div>
      <div>3</div>
      <div>4</div>   
    </div>
  <div>2</div>
  <div>3</div>
  <div>4</div>   
  </div>
</div>
</body>

这是CSS代码：

body {
  width: 90%;
  height: 90%;
  margin-left:auto;
  margin-right:auto
}

/* DIV */

#DIV {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


#DIV > div{
    box-sizing: border-box;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;
    min-height: 50%;
    background-color: lightgreen;
    border: dashed 1px gray;
}

/* DIV1 INSIDE DIV */

#div1_inside_div {
   flex-wrap: wrap 
}

#div1_inside_div div {
    box-sizing: border-box;
    margin: 0px;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;  
    background-color: yellow;
    border: dashed 1px black;
}

/* DIV2 INSIDE DIV1 */

#div2_inside_div1 {
    flex-wrap: wrap; 
}

#div2_inside_div1 div {
    box-sizing: border-box;
    margin: 0px;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;  
    background-color: pink;
    border: dashed 1px black;
}


/* DIV3 INSIDE DIV2 */

#div3_inside_div2 {
    flex-wrap: wrap; 
}

#div3_inside_div2 div {
    box-sizing: border-box;
    margin: 0px;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;  
    background-color: lightblue;
    border: dashed 1px blue;
}

谢谢！ J

Answer 1

你可以针对这个问题看看使用Bootstrap这样的框架，它可以让你用它基于网格的元素定位系统轻松解决这个问题。除此之外，Bootstrap还允许您的div自动响应。

值得一看，希望这有助于：）

Answer 2

不，这不是黑客攻击。

您的元素与柔性容器同时起作用，并作为柔性物品从上层柔性容器中起作用。

但是，你的代码可能更干。例如：通过所有布局重用容器和容器子：

sqlite> select * from t where s="somestring" and i=0;

body {
  width: 90%;
  height: 90%;
  margin-left: auto;
  margin-right: auto
}

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  height: 50%;
}

/* specific properties */
.level1 {
  height: 440px;
}

.level1 > div {
  background-color: lightgreen;
  border: dashed 1px black;
}
.level2 > div {
  background-color: yellow;
  border: dashed 1px black;
}
.level3 > div {
  background-color: pink;
  border: dashed 1px black;
}
.level4 > div {
  background-color: lightblue;
  border: dashed 1px blue;
}

嵌套DIV - 4个div（正方形），其中1个有4个div（正方形），其中1个有4个div（正方形）

2 个答案: