Question

由于某些原因，顶部的框在左侧留有多余的空间，但我不确定为什么。非常感谢您的帮助。

HTML：

  <section class="proj-box">
       <div class="wrapper">
         <div class="thumb" id="Dthumb">
           <a href="Dough.html">
             <img src="Doughblack.png" alt="screen mockups of Dough app">
           </a>
         <h3 id="Dtitle">Dough - Your new financial companion</h3>
       </div>
       <div class="thumb" id="Fthumb">
         <a href="Flyte.html">
           <img src="flytebig.png" alt="screen mockups of Flyte app">
         </a>
         <h3 id="Ftitle">Flyte - Flight Search App</h3>
       </div>
       <div class="thumb" id="Othumb">
         <a href="OrderUp.html">
           <img src="OrderUpred.png" alt="screen mockups of OrderUp app">
         </a>
         <h3 id="Otitle">OrderUp - Food Delivery App</h3>
       </div>
     </div>
   </section>

CSS：The picture shows that the black box isn't aligned with the red box

.proj-box .thumb {
  width: 380px;
  height: 380px;
  float: left;
  margin: 20px 20px 0;
}
.proj-box img {
  width: 380px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.proj-box img:hover {
  box-shadow: 0 0 2px 1px #D89E9E;
}

Answer 1

由于浮动元素的宽度超过了总可用宽度，因此最后一个元素被推到下一行。尝试使用flex或grid。请使用grid

查找代码段

.proj-box .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}

.proj-box .thumb {}

.proj-box img {
  width: 380px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.proj-box img:hover {
  box-shadow: 0 0 2px 1px #D89E9E;
}

<section class="proj-box">
  <div class="wrapper">
    <div class="thumb" id="Dthumb">
      <a href="Dough.html">
        <img src="Doughblack.png" alt="screen mockups of Dough app">
      </a>
      <h3 id="Dtitle">Dough - Your new financial companion</h3>
    </div>
    <div class="thumb" id="Fthumb">
      <a href="Flyte.html">
        <img src="flytebig.png" alt="screen mockups of Flyte app">
      </a>
      <h3 id="Ftitle">Flyte - Flight Search App</h3>
    </div>
    <div class="thumb" id="Othumb">
      <a href="OrderUp.html">
        <img src="OrderUpred.png" alt="screen mockups of OrderUp app">
      </a>
      <h3 id="Otitle">OrderUp - Food Delivery App</h3>
    </div>
  </div>
</section>

Answer 2

您错过了“ div”标签

<section class="proj-box">
   <div class="wrapper">
     <div class="thumb" id="Dthumb">
       <a href="Dough.html">
         <img src="Doughblack.png" alt="screen mockups of Dough app">
       </a>
       <h3 id="Dtitle">Dough - Your new financial companion</h3>
     </div>
     <div class="thumb" id="Fthumb">
       <a href="Flyte.html">
         <img src="flytebig.png" alt="screen mockups of Flyte app">
       </a>
       <h3 id="Ftitle">Flyte - Flight Search App</h3>
     </div>
     <div class="thumb" id="Othumb">
       <a href="OrderUp.html">
         <img src="OrderUpred.png" alt="screen mockups of OrderUp app">
       </a>
       <h3 id="Otitle">OrderUp - Food Delivery App</h3>
     </div>
   </div>
 </div>

尝试一下。

为什么盒子对齐不正确？

2 个答案: