html - 保持 div 和图像分离实体

Question

除了一些问题外，我在产品页面上有一个布局，用于放置一堆图像，这是我想要的。我的图像和边框是我希望边框(图像容器)与图像分开的地方。我穿过图像的文本 block 周围有一些框阴影，尽管我没有在任何地方说过我想要框阴影，最后，在某些显示器上，图像会失去它们的形状并且只是坐在彼此之上。我希望它们保持它们的形状，直到它们由于屏幕尺寸的限制而绝对必须坐在彼此之上。我在编码方面还不够新，所以请尽量清楚(简化)。图片和文字仅供引用，请随意更改，

谢谢

div.maintext {
  position: relative;
  text-align: center;
  margin: auto;
  width: 90%;
  font-weight: normal;
  font: ;
  background-color: #ffffff;
  padding: 25px;
  margin-top: 30px;
  box-shadow: 3px 3px 3px #888888;
  border-radius: 5px;
  overflow: hidden;
}
.leftimg {
  position: relative;
  width: 400px;
  height: auto;
  margin-top: 50px;
  margin-bottom: 30px;
  float: left;
  margin-left: 10%;
  `
}
h3 span {
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  color: white;
  font: bold 35px/45px freestyle script, Sans-Serif;
  text-align: center;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
}
img[width="400"] {
  border: 3px solid #5F5F5F;
  border-radius: 3px;
  transition: .15s ease-out;
}
img[width="400"]:hover {
  opacity: 0.6;
  transition: opacity .15s ease-in-out;
}

<div class="maintext">
  <div class="leftimg">
    <a href="Homepage.php">
      <img src="http://dummyimage.com/300" width="400" height="auto">
    </a>
    <a href="Homepage.php"><h3><span>Big American Burger</span></h3></a>
  </div>
  <div class="leftimg">
    <a href="Homepage.php">
      <img src="http://dummyimage.com/300" width="400" height="auto">
    </a>
    <a href="Homepage.php"><h3><span>Tasty Carvery</span></a>
    </h3>
    </a>
  </div>
  <div class="leftimg">
    <a href="Homepage.php">
      <img src="http://dummyimage.com/300" width="400" height="auto">
    </a>
    <a href="Homepage.php"><h3><span>Sausage and Chips</span></h3></a>
  </div>
  <div class="leftimg">
    <a href="Homepage.php">
      <img src="http://dummyimage.com/300" width="400" height="auto">
    </a>
    <a href="Homepage.php"><h3><span>Delicious Deserts</span></h3></a>
  </div>
  <div class="leftimg">
    <a href="Homepage.php">
      <img src="http://dummyimage.com/300" width="400" height="auto">
    </a>
    <a href="Homepage.php"><h3><span>Beautiful Carverys</span></h3></a>
  </div>
  <div class="leftimg">
    <a href="Homepage.php">
      <img src="http://dummyimage.com/300" width="400" height="auto">
    </a>
    <a href="Homepage.php"><h3><span>Tasty Carvery</span></h3></a>
  </div>
  <div class="leftimg">
    <a href="Homepage.php">
      <img src="http://dummyimage.com/300" width="400" height="auto">
    </a>
    <a href="Homepage.php"><h3><span>Sausage and Chips</span></h3></a>
  </div>
  <div class="leftimg">
    <a href="Homepage.php">
      <img src="http://dummyimage.com/300" width="400" height="auto">
    </a>
    <a href="Homepage.php"><h3><span>Delicious Deserts</span></h3></a>
  </div>
</div>

Answer 1

看起来你已经把一个 div.maintext 框阴影。您可以使用 boostrap使页面轻松响应并使用 browser developer tools轻松调试 js 和 css 错误。快速编辑 your code .这是一个示例页面，您可以尝试which i found快速搜索。