使一行中的正方形 div 成为垂直矩形？

Question

我已经创建了一个响应式网格布局并且它的所有工作都非常好，但是现在我需要做的最后一件事就是将几个正方形制作成矩形。

我需要制作矩形的是网格第二列顶部的两个方块和网格底行的最后两个方块。 A 你可以看到我已经完成了水平矩形，现在我需要对第二列中顶部的两个正方形进行垂直处理。

谁能告诉我如何做到这一点并保持旋转动作，因为我已经尝试过但无法正确完成。

谢谢

CSS

.trigger{
    width:200px; 
    height:200px; 
    margin-right:15px;
    margin-bottom:15px; 
}
.hover-img, 
.hover-img.hover_effect  {
    background-color:white;
    position: relative;
    width: 200px;
    height: 200px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    text-align: center;
    font-size: 0;
    -webkit-user-select: none;
    -webkit-touch-callout: none; 
    border-style: solid;
    border-width: 1px;
    border-color: #4595ff;
}
.trigger:hover > .hover-img {
     -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    transform:rotateY(360deg);
    font-size:14px;
    color:white;
}

.img1 {
    background-size: 100% 100%;
    background-repeat: no-repeat; 
}
.img1:hover{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.img2 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.img2:hover{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.img3 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
} 
.img3:hover{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.img4 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.img4:hover{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.img5 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.img5:hover{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.img6 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.img6:hover{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#container{
    width:960px; margin: 0 auto;
}

.row{
    display: flex;
}

HTML

<div id="container">
    <div class="row">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img1"> </div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img2"> </div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img3"></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"> </div>
        </div>
    </div>
    <div  class="row">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"> </div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"> </div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"> </div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"> </div>
        </div>
    </div>

    <div  class="row">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"> </div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"> </div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"> </div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"> </div>
        </div>
    </div>

</div>

Answer 1

增加第3列触发器的宽度并隐藏第4列触发器。示例 here

Css

.row:first-child .trigger:nth-child(3),
.row:first-child .trigger:nth-child(3) .img3 {
  width: 415px;
}
.row:first-child .trigger:nth-child(4) {
  display:none;
}

.row:nth-child(3) .trigger:nth-child(3),
.row:nth-child(3) .trigger:nth-child(3) .img5 {
  width: 415px;
}
.row:nth-child(3) .trigger:nth-child(4) {
  display:none;
}

Answer 2

您尝试过在单个 .row 容器中 flex-wrap 吗？？

使用你的 .large class 或 nth-child().

.trigger{
    width:200px; 
    height:20px; 
    margin-right:15px;
    margin-bottom:15px; 
  box-shadow:0 0 0 2px;/* or border + box-sizing */
}
#container .row{
    width:960px; margin: 0 auto;
    display: flex;
  flex-wrap:wrap;
}
.trigger.large {
  width:415px;
}

<div id="container">
  <div class="row">
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img img1"> </div>
    </div>
    <div class="trigger large">
      <div tabindex="0" class="maincontent hover-img img2"> </div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img img3"></div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img img4"> </div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img img5"> </div>
    </div>
    <div class="trigger large">
      <div tabindex="0" class="maincontent hover-img img6"> </div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img img5"> </div>
    </div>
    <div class="trigger large">
      <div tabindex="0" class="maincontent hover-img img6"> </div>
    </div>
    <div class="trigger">
      <div tabindex="0" class="maincontent hover-img img5"> </div>
    </div>
    <div class="trigger large">
      <div tabindex="0" class="maincontent hover-img img6"> </div>
    </div>
    <div class="trigger large">
      <div tabindex="0" class="maincontent hover-img img5"> </div>
    </div>
  </div>

</div>

使一行中的正方形 div 成为垂直矩形？

making a square div within a row a vertical rectangle?

html

css

grid-layout