html - 将每张牌向左浮动 - 牌的水平线

Question

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 2;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
}

.right {
	float: right;
    top:0;
    right:0;
    position: absolute;
    z-index: 2;
}

<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Gonorrhea</h1> 
      <p>Positives - Can be cured<br><br>
      Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
      Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
      
      </p>
    </div>
  </div>
</div>

<br>
<div class="right">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
    	
      <h1>Chlamydia</h1> 
      <p>Positives - This is easily treated and cured with antibiotics.<br><br>
      Negatives - If left untreated can lead to infertility.<br><br>
      Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
     
      </p>
    </div>
  </div>
</div>
</div>


<br>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Syphilis</h1> 
      <p>Positives -               .<br><br>
       Negatives -                        .<br><br>
      Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
      </p>
    </div>
  </div>
</div>

<br>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>HIV</h1>  
      <p>Positives -               .<br><br>
       Negatives -                        .<br><br>
       Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more 
      </p>
    </div>
  </div>
</div>

我希望这些翻转卡在水平线上彼此并排出现。我试图让一个浮子离开，但它没有，真的成功了。我究竟做错了什么？我只想让它们出现在一条水平线上，每张卡片之间有一点间隙。它似乎自然地出现在页面上的一条垂直线上。

标签： htmlcss

Answer 1

您可以display: inline-block使用.flip-card.

body {
  font-family: Arial, Helvetica, sans-serif;
  width: 1300px; /* enough space for 4 flip card */
  overflow-x: scroll /* horizontal scrollable */
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  display: inline-block; /* to appear alongside each other in a horizontal line */
  margin: 10px /* a slight gap between each card */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 2;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
}

/* Remove unnecessary .right style */

<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Gonorrhea</h1> 
      <p>Positives - Can be cured<br><br>
      Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
      Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
      
      </p>
    </div>
  </div>
</div>

<!-- remove parent element with class name .right because it's unnecessary -->
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
    	
      <h1>Chlamydia</h1> 
      <p>Positives - This is easily treated and cured with antibiotics.<br><br>
      Negatives - If left untreated can lead to infertility.<br><br>
      Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
     
      </p>
    </div>
  </div>
</div>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Syphilis</h1> 
      <p>Positives -               .<br><br>
       Negatives -                        .<br><br>
      Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
      </p>
    </div>
  </div>
</div>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>HIV</h1>  
      <p>Positives -               .<br><br>
       Negatives -                        .<br><br>
       Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more 
      </p>
    </div>
  </div>
</div>