0
Ich habe 4 Boxen und ich möchte sie 2 x 2 setzen, aber kann nicht herausfinden, wie es geht.vier Boxen - setzen Sie 2 auf jeder Reihe
Ich habe created a jsfiddle here
Das Problem, das ich habe ist, dass eines der Kästchen oben ist, und die anderen drei sind unten.
Ich möchte es wie dieses ist
Mein Code suchen, wie der Einfachheit halber folgt.
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;
}
oder sogar Sie können Float auch in anderen Boxen hinzufügen. –
das hat funktioniert! wie meinst du hinzufügen float in den anderen boxen? –
ok gut. Wenn Sie 4 Kästchen in einer Zeile inline einfügen möchten, hilft Float ebenfalls. –