这是一个缺口，我希望我的形象能出现在那里

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;
}
.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的子代。您忘记关闭.sleft1 的</div>

CSS

不需要为CCD_ 10div编写2个不同但相同的样式。你只能为两者写一种风格（如果你想让它们相同的话）

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

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

在.flex-caption上添加box-sizing:border-box，因为如果不添加padding:2%，则.flex-caption的宽度将超过100%

+一些小的css更改

让我知道它是否有助于

Answer 2

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