Question

我在产品页面上有一系列图像的布局，除了一些问题，我希望如此。我的图像和边框是我希望边框（图像容器）与图像分离的地方。我穿过图像的文本块在它们周围有一些盒子阴影，虽然没有我说我想要盒子阴影，最后，在一些显示器上，图像将失去它们的形状，只是坐在彼此的顶部。我希望他们保持自己的形状，直到他们绝对必须坐在彼此的顶部，因为屏幕尺寸限制。我在编码时仍然足够新，所以请尽量保持清醒（愚蠢）。图像和文字仅用于说明目的，因此可以随意更改它们，

谢谢

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

保持div和图像分离实体

1 个答案: