有一个差距，我希望我的形象去那里

Question

我想把我的图片放在一个空隙里，但是我失败了，这里是jsfiddle。如您所见，正确的图像和叠加层没有按应有的方式放置。我希望他们正好在上面的缝隙中。

HTML代码：

<div class = "leftpart fadeInBlock">    
  <a href="http://www.google.com">
    <img src="images/test.jpg"/>
    <div class="flex-caption hvr-fade">Adventurer Lemon</div>
  </a>
  <div class = "sleft1">
    <a href="http://www.google.com">
      <img src="images/test.jpg">
      <div class="flex-caption hvr-fade">Adventurer Lemon</div>
    </a>
    <div class = "sleft2">
      <a href="http://www.google.com">
        <img src="images/test.jpg">
        <div class="flex-caption hvr-fade">Adventurer Lemon</div>
      </a>
    </div>
  </div>
</div>

Answer 1

.leftpart {
  width: 43%;
  margin-top: 0.7%;
  float: right;
}

.leftpart a img {
  width: 100%;
  height: 130px;
  display:block;
}
.sleft1{
  float: left;
  width: 45%;
}
.sleft2{
  float: right;
  width: 45%;
}
.leftpart .sleft1 a img, .leftpart .sleft2 a img {
  display:block;
  background-color:blue;
  margin-top:4.5%;
}



.flex-caption {
  box-sizing: border-box;
  padding: 2%;
  top: 0px;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  position: relative;
  line-height: 18px;
}

<div class = "leftpart fadeInBlock"> 
    <a href="http://www.google.com">
     <img src="images/test.jpg"/>
     <div class="flex-caption hvr-fade">Adventurer Lemon</div>
    </a>
     <div class = "sleft2">
      <a href="http://www.google.com">
       <img src="images/test.jpg">
       <div class="flex-caption hvr-fade">Adventurer Lemon</div>
      </a>
     </div>
    <div class = "sleft1">
     <a href="http://www.google.com">
      <img src="images/test.jpg">
      <div class="flex-caption hvr-fade">Adventurer Lemon</div>
     </a>
    </div>
   </div>

Answer 2

查看片段

.leftpart {
  width: 43%;
  margin-top: 0.7%;
  float: right;
}

.sleft1,.sleft2 {
  float:left;
  width:50%;
}

.leftpart a img {
  width: 100%;
  height: 130px;
  display:block;
}

.leftpart .sleft1 a img {
  
  display:block;
  background-color:blue;
  margin-top:4.5%;
}

.sleft2 a img {
  display:block;

  margin-top:4.5%;
  background-color:red
}


.flex-caption {
  width: 96%;
  padding: 2%;
  top: 0px;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  position: relative;
  line-height: 18px;
  box-sizing: border-box;
}

.flex-caption {
  width: 100%;
  padding: 2%;
  top: 0px;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  position: relative;
  line-height: 18px;
}

<div class = "leftpart fadeInBlock"> 
     <a href="http://www.google.com">
      <img src="images/test.jpg"/>
      <div class="flex-caption hvr-fade">Adventurer Lemon</div>
     </a>
     <div class = "sleft1">
      <a href="http://www.google.com">
       <img src="images/test.jpg">
       <div class="flex-caption hvr-fade">Adventurer Lemon</div>
      </a>
            </div>
      <div class = "sleft2">
       <a href="http://www.google.com">
        <img src="images/test.jpg">
        <div class="flex-caption hvr-fade">Adventurer Lemon</div>
       </a>
      </div>
     </div>
    </div>

你的 html 和 css

都有很多问题

HTML

如果您希望 2 divs 到 float 彼此相邻，您需要将它们作为兄弟姐妹放在 html 中。您的 .sleft2 是 .sleft1 的 child。您忘记为 .sleft1

关闭 </div>

CSS

无需为 .flex-caption div 编写 2 个不同但相同的样式。你只能为两者编写一种样式（如果你希望它们相同）

重要您需要 float 两个容器 .sleft1 ， .sleft2 而不是其中的元素！所以从其他元素中删除所有 floats 并添加

 .sleft1,.sleft2 {
   float:left;
   width:50%;
 }

在 .flex-caption 上添加 box-sizing:border-box 因为如果不这样做，通过使用 padding:2% .flex-caption 的宽度会超过 100%

+一些小的 css 变化

如果有帮助请告诉我

有一个差距，我希望我的形象去那里

There is a gap, and I want my image to go there

html

css

overlay

position

image