Question

如何为我的图像获取2×2布局而不是通过带有CSS的网页堆叠的单个图像，如果可能的话，我想要一种不需要javascript的方法，因为我对它没有任何知识或经验。出于某种原因，当我使用片段运行此代码时，它向我显示了我想要的2 x 2布局，但是当我尝试在我的代码上运行代码时，情况并非如此。铬。

＆＃13;

.box {
  cursor: pointer;
  height: 281px;
  position: relative;
  overflow: hidden;
  width: 500px;
  margin-left:150px;
  display: inline-block;
  margin-bottom: 35px;
  float:left;
}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box .overbox {
  background-color: #304562;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 500px;
  height: 281px;
  padding: 130px 20px;
}

.box:hover .overbox { opacity: 1; }
.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size: 20px;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 0.8em;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

＆＃13;

</div>
       <div class="box"> <img src="../images/Ferrari2.jpg" >
       <div class="overbox">
       <div class="title overtext">Ferrari 458 Italia Spider</div>
       <div class="tagline overtext">SPECS:</div>
</div>
</div>
</div>
       <div class="box"> <img src="../images/Italia.jpg">
       <div class="overbox">
       <div class="title overtext">Ferrari 458 Italia</div>
       <div class="tagline overtext">SPECS:</div>
</div>
</div>
</div>
       <div class="box"> <img src="../images/R35-2.jpg">
       <div class="overbox">
       <div class="title overtext">Nissan R35 GTR</div>
       <div class="tagline overtext">SPECS:</div>
</div>
</div>
       <div class="box"> <img src="../images/P1.jpg">
       <div class="overbox">
       <div class="title overtext">Mclaren P1</div>
       <div class="tagline overtext">SPECS:</div>
</div>
</div>
       <div class="box"> <img src="../images/GT3.jpg">
       <div class="overbox">
       <div class="title overtext">Porsche GT3 </div>
       <div class="tagline overtext">SPECS:</div>
</div>
</div>
       <div class="box"> <img src="../images/R8-2.jpg">
       <div class="overbox">
       <div class="title overtext">Audi R8</div>
       <div class="tagline overtext">SPECS:</div>
</div>
</div>

＆＃13;

Answer 1

在HTML中，您只需添加 br 属性即可。这将允许您添加图像的换行符。更好的方法是将图像的宽度设置为父类的100％。

如何在具有相同类的图像之间获得空格？

1 个答案: