时间戳

首页 > 解决方案 > 为什么盒子没有正确对齐？

html - 为什么盒子没有正确对齐？

问题描述

出于某种原因，顶盒在左侧留下了额外的空间，但我不知道为什么。我将衷心感谢您的帮助。

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：图片显示黑框未与红框对齐

.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;
}

标签： htmlcsscontainers

解决方案

你错过了“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>

尝试这个。

推荐阅读