使用.before（）和.after（）将多个元素包装在父元素中？

Question

我想创建以下安排：

每个元素必须是正方形。正方形1,4和7各占总宽度的25％，其余均为12.5％宽。当然，高度与宽度相同。

通常这很简单，但我从API输出这些元素。它们输出很好，但由于其动态性，我不确定如何确保它们达到理想的排列。

我怀疑最直接的方法是将1,4和7作为常规div元素，并且每个2/3和5/6都在包含div中。这些容器每个高度为100％，宽度为12.5％，内部div元件2/3和5/6各有100％宽度和50％高度。

默认情况下，每个元素都有my-div-quarter个类。对于元素2和5，我创建一个开始div标签。对于元素3和6，我关闭了这个div。我还从每个内部元素2,3,5和6中删除my-div-quarter类。

我有以下循环作用于所有这些元素：

$('.my-div').each(function(index){
  if (index === 1 || index === 4){
    $(this).before("<div class='my-div my-div-eighth'>");
    $(this).removeClass('my-div-quarter');
  }
  else if (index === 2 || index === 5){
    $(this).removeClass('my-div-quarter');
    $(this).after("</div>");
  }
});

然后我有以下CSS：

 .my-div-quarter {
    width: 25%;
  }
  .my-div-eighth {
    width: 12.5%;
    div {
      width: 100%;
      height: 50%;
    }
  }

几乎有效，但由于某种原因，my-div-eighth元素只是关闭而不包含内部元素。有什么想法吗？

Answer 1

您也可以使用flex，因此您不必担心打开/关闭div，因为所有这些都是相同的：

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height:155px;
  flex-direction: column;
  align-items: center;
}

.item {
  flex: 1;
  background: red;
  display: inline-block;
  width: 12.5%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(4),
.item:nth-child(7) {
  flex: 0 0 100%;
  width: 25%;
  background: yellow;
}

.item:nth-child(3),
.item:nth-child(6) {
  background: green
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

如果想要使其响应，您可以添加此jQuery代码，动态调整容器的高度以保持平方比：

$( ".container" ).css( 'height',$( ".container" ).width()/4);

$( window ).resize(function() {
  $( ".container" ).css( 'height',$( ".container" ).width()/4);
});

Answer 2

body {
  text-align: center;
}

div {
  position: relative;
}

.content {
  position: absolute !important;
  width: 100%;
  height: 100%;
}

.lrg-square {
  text-align: center;
  background-color: yellow;
  width: 25%;
  padding-bottom: 25%;
  float: left
}

.md-container {
  width: 12.5%;
  float: left;
}

.sm-square {
  width: 100%;
  padding-bottom: 100%;
  background-color: #52FF26;
}

.sm-square:nth-child(1) {
  background-color: #F40039;
  clear: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='lrg-square'>
  <div class='content'>1</div>
</div>
<div class='md-container'>
  <div class='sm-square'>
    <div class='content'>2</div>
  </div>
  <div class='sm-square'>
    <div class='content'>3</div>
  </div>
</div>
<div class='lrg-square'>
  <div class='content'>4</div>
</div>
<div class='md-container'>
  <div class='sm-square'>
    <div class='content'>5</div>
  </div>
  <div class='sm-square'>
    <div class='content'>6</div>
  </div>
</div>
<div class='lrg-square'>
  <div class='content'>7</div>
</div>

只是为了与Temani Afif使用flex-box已经接受的正确答案进行比较。 这只是使用css，我更喜欢flex-box。