Question

我正在为我的个人作品集制作一张翻页卡。我将div设置为一定的大小，并且我希望连续两个，但是它们不会达到我设置的大小，而是四个连续而不是我想要的两个。这是我所有的代码：

/* Whole Page */

body {
  margin: 0;
  text-align: center;
}


/* Nav */

nav {
  display: block;
  position: fixed;
  background-color: black;
  color: white;
  width: 100%;
  height: 10vh;
  border-bottom: solid white 1px;
}

.btns {
  display: inline-block;
  float: right;
  margin-top: -3.25%;
  font-family: sans-serif;
  width: 30vw;
}

button {
  background-color: black;
  border: none;
  color: white;
  display: inline-block;
  float: right;
  margin-right: 1%;
  margin-left: 1%;
  font-size: 22px;
  cursor: pointer;
}

#logo {
  margin-left: 3.5%;
  text-align: left;
}

/* Welcome Section */

#welcome-section {
  background-image: url(https://www.walldevil.com/wallpapers/a51/2755-city-cityscape-wallpaper-architecture-wallpapers-albums-skylines.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  border-bottom: black 3px solid;
}

h1,
#welcome-section p {
  width: 50%;
  color: white;
  text-align: left;
  margin: auto;
  font-weight: 800;
}

h1 {
  font-size: 60px;
  padding-top: 25vh;
  font-family: sans-serif;
}

#welcome-section p {
  font-size: 27px;
  font-family: serif;
}

/* Portfolio */

#projects {
  width: 55vw;
  margin: auto;
}

#projects-h2 {
  font-size: 30px;
  text-decoration: underline;
}

.flip-card {
  width: 25vw;
  height: 25vh;
  margin: auto;
  position: relative;
  perspective: 100vw;
  float: left;
}

@media (min-width: 600px) and (max-width: 992px) {
  .flip-card {
    width: 31%;
    margin: 1.16%;
  }
}

@media (min-width: 992px) {
  .flip-card {
    width: 23%;
    margin: 1%;
  }
}

.flip-card .front,
.flip-card .back {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-size: cover;
  transition: 0.3s;
  backface-visibility: hidden;
  /* Change Colors! */
  border: solid 1px #333;
  box-shadow: 5px 10px 8px #333;
}

.flip-card:hover .front {
  transform: rotateY(180deg) scale(0.5);
}

.flip-card .back {
  /* Change Colors! */
  background: #333;
  color: #FFF;
  display: flex;
  justify-content: center;
  transform: rotateY(180deg) scale(0.5);
}

.flip-card:hover .back {
  transform: rotateY(360deg) scale(1);
}

.flip-card .front {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Contact */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSS -->
  <link rel="stylesheet" href="main.css">
  <!-- FreeCodeCamp Tests -->
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <title>Jacob Pieczynski | Front-end Web Developer</title>
</head>

<body>
  <!-- Nav -->
  <nav id="navbar">
    <h2 id="logo">Jacob Pieczynski</h2>
    <div class="btns">
      <a href="#welcome-section"><button>Home</button></a>
      <a href="#projects"><button>Projects</button></a>
      <a href="#contact"><button>Contact</button></a>
    </div>
  </nav>
  <!-- Welcome Section -->
  <section id="welcome-section">
    <h1>I am Jacob Pieczynski</h1>
    <p class="h1-desc">An up and coming teen web developer</p>
  </section>
  <!-- Projects -->
  <section id="projects">
    <h2 id="projects-h2">Projects</h2>
    <!-- New Card -->
    <div class="flip-card">
      <!-- Front -->
      <div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class="back">
        <h2 class="card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class="flip-card">
      <!-- Front -->
      <div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class="back">
        <h2 class="card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class="flip-card">
      <!-- Front -->
      <div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class="back">
        <h2 class="card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class="flip-card">
      <!-- Front -->
      <div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class="back">
        <h2 class="card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class="flip-card">
      <!-- Front -->
      <div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class="back">
        <h2 class="card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class="flip-card">
      <!-- Front -->
      <div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class="back">
        <h2 class="card-header">Loren Impus</h2>
      </div>
    </div>
  </section>
  <!-- Contact -->
  <section id="contact">
    <!-- Contact Circle - Instagram -->
    <a href="#" id="contact-a">
      
    </a>
    <!-- Contact Circle - Email -->
    <a href="#" id="contact-a">
    
    </a>
    <!-- Contact Circle - FreeCodeCamp -->
    <a href="#" id="contact-a">
    
    </a>
    <!-- Contact Circle - Github -->
    <a href="#" id="contact-a">
    
    </a>
  </section>
  <!-- Footer -->
  <footer id="footer">

  </footer>
</body>

</html>

感谢您的帮助，因为这对我来说是一个重大项目，对此我感到非常沮丧。祝你有美好的一天！

Answer 1

似乎正在发生这种情况，因为您正在覆盖通过媒体查询设置的宽度，例如您拥有以下内容：

.flip-card {
  width: 25vw;
  height: 25vh;
  margin: auto;
  position: relative;
  perspective: 100vw;
  float: left;
}

那么你有这个：

@media (min-width: 600px) and (max-width: 992px) {
  .flip-card {
    width: 31%;
    margin: 1.16%;
  }
}

@media (min-width: 992px) {
  .flip-card {
    width: 23%;
    margin: 1%;
  }
}

这些媒体查询中的每个宽度都将覆盖您的25vw，如果您从每个媒体查询中删除宽度百分比或更改宽度：23％至48％，您的即时贴将进入2行。宽度23％告诉他们是容器宽度的23％百分比，大约是宽度的1/4，这会使它们连续成为4。

为什么不调整div的大小？

1 个答案: