Question

我正在尝试创建响应式网格布局。不过我到目前为止已经出现了一个出错的3x3网格。我设法让广场旋转。但是我似乎无法用div实现它的布局。

有人可以告诉我如何解决这个问题并将其设为3x3网格，因为我很困惑。我的代码如下。

CSS

.trigger {
   width:100%;
   height:400px;
   background-color:white; 
}

.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: 100%;
   overflow: hidden; 
}

#column1 {
   float: left;
   width: 30%;
   margin-top: 0px;
   margin-bottom: 100px;
   overflow: hidden;
   margin-left: 2%;
   font-size: 12px
}

#column3 {
   float: left;
   width: 30%;
   margin-top: 0px;
   margin-left: 2%;
   margin-bottom: 100px;
   overflow: hidden;
}

HTML

<div id="container">
<div id="column1">
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img1" style="height: 390px;">
 </div>
</div>
<p></p>
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img2" style="height: 390px;">
</div>
</div>
<p></p>
</div>
<div id="column1">
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img3" style="height: 390px;"></div>
</div>
<p></p>
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img4" style="height: 390px;">
</div>
<div id="column3">
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img5" style="height: 390px;">
</div>
</div>
<p></p>
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img6" style="height: 390px;">
</div>
</div>
<p></p>
</div>
</div>

Answer 1

这适用于所有IE支持 Codpen 1。

code

对于使用flexbox的IE 10+ Codepen 2。

code

如何设置3x3 CSS网格

1 个答案: