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

时间:2016-04-04 09:33:27

标签: html css

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



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

<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;
&#13;
&#13;

运行后,您可以看到div1div2之间存在差距。 我有什么方法可以删除它吗? (div1div2之间的差距应等于0px。

提前感谢您的帮助。

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

有两件事因为那里有图像

  
      
  1. div1图片位于<p>标记中,<p>标记有默认的底边距,您需要将其设置为0
  2.   
.featured-sellers-collage .div1 p {
    top: 0;
    bottom: 0;
    float:left;
    width: 50%;
  margin-bottom:0;
}
  
      
  1. <img>是内置代码,您需要将display:block设置为<img>以删除图片的空间底部
  2.   
.featured-sellers-collage .div1 p img {

    width: 100%;
  display:block
}

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

答案 2 :(得分:1)

你需要通过添加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>