个人中心
gpt4 book ai didi

html - 为什么div不调整大小？

转载 作者：行者123 更新时间：2023-11-28 01:23:38 24 4
gpt4 key购买 nike

我正在为我的个人作品集制作翻盖卡片。我将我的 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>

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

最佳答案

看起来这种情况正在发生，因为您正在覆盖您使用媒体查询设置的宽度，例如您有这个:

.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 个。

关于html - 为什么div不调整大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51350226/

24 4 0
文章推荐： javascript - 使用ajax将json/javascript数据/对象传递给c#函数
文章推荐： html - 主页上的背景图像拉伸(stretch)
文章推荐： javascript - 使用加速度计检测震动，然后激活老虎机
文章推荐： javascript - Impact.js 级别对象的结构是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com