html - 四个盒子——每行放 2 个

Question

我有 4 个盒子，我想把它们放成 2 x 2，但不知道该怎么做。

我有created a jsfiddle here

我遇到的问题是其中一个框在上方，另外三个在下方。

我希望它看起来像这样

为了方便起见，我的代码如下。

html

<div class="wrap">
  <div class="bg"></div>
  <div class="main-container artists">

    <div class="employee-box">
    </div>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-1">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-2">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- front content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-3">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>
  </div>

CSS

body{
  height: 2000px;
}
.wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center;
  background-size: cover;
  transform: scale(1.1);
}

.employee-box {
  background-color: red;
  height: 250px;
  width: 250px;
}

.employee-1 {
  background: yellow;
}

.employee-2 {
  background: pink;
}

.employee-3 {
  background: green;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  display: inline-block;
}

.container-border{
  border: 1px solid #ccc; 
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container, .front, .back {
  width: 250px;
  height: 250px;
}

/* flip speed goes here */
.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

Answer 1

你应该添加 float: left;或显示:内联 block ；在第一个盒子里。

例如:

.employee-box{
  float: left;
}