Question

过去两天我一直在做拼贴画，我遇到了一个问题。

＆＃13;

body {
	width: 380px;
}

.featured-sellers-collage {
  width: 100%;
}

.featured-sellers-collage .div1 p {
	top: 0;
	bottom: 0;
	float:left;
	width: 50%;
}
.featured-sellers-collage .div1 p img {
	
	width: 100%;
}

.featured-sellers-collage .div2 {
	flaot: right;
}

＆＃13;

<div class="featured-sellers-collage">
	<div class="div1">
      <p><img src="http://lorempixel.com/189/325/" alt="" /></p>
      <p><img src="http://lorempixel.com/189/325/" alt=""/></p>
  </div>
  
  <div class="div2">
    <img src="http://lorempixel.com/380/325/" alt="" />
  </div>

</div>

＆＃13;

运行后，您可以看到div1和div2之间存在差距。我有什么方法可以删除它吗？（div1和div2之间的差距应等于0px。

提前感谢您的帮助。

Answer 1

从p标签中删除边距

.featured-sellers-collage .div1 p {
 top: 0;
 bottom: 0;
 float:left;
 width: 50%;
    margin:0;
}

.featured-sellers-collage .div1 p img {
 width: 100%;
   display: block;
}

Answer 2

有两件事因为那里有图像

div1图片位于<p>标记中，<p>标记有默认的底边距，您需要将其设置为0

.featured-sellers-collage .div1 p {
    top: 0;
    bottom: 0;
    float:left;
    width: 50%;
  margin-bottom:0;
}

<img>是内置代码，您需要将display:block设置为<img>以删除图片的空间底部

.featured-sellers-collage .div1 p img {

    width: 100%;
  display:block
}

这是工作小提琴：https://jsfiddle.net/yudi/nenu9chm/

Answer 3

你需要通过添加vertical-align：top来删除P标签默认边距和img默认间距;一切都会好的

body {
	width: 380px;
}

.featured-sellers-collage {
  width: 100%;
}

.featured-sellers-collage .div1 p {
	top: 0;
	bottom: 0;
	float:left;
	width: 50%;
}
.featured-sellers-collage .div1 p img {
	
	width: 100%;
}
.featured-sellers-collage p{margin: 0;}
 .featured-sellers-collage img{vertical-align: middle;}

.featured-sellers-collage .div2 {
	flaot: right;
}

<div class="featured-sellers-collage">
	<div class="div1">
      <p><img src="http://lorempixel.com/189/325/" alt="" /></p>
      <p><img src="http://lorempixel.com/189/325/" alt=""/></p>
  </div>
  
  <div class="div2">
    <img src="http://lorempixel.com/380/325/" alt="" />
  </div>

</div>

使用float后，删除两个div之间的间隙

3 个答案: