过去两天我一直在做拼贴画,我遇到了一个问题。
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;
运行后,您可以看到div1
和div2
之间存在差距。
我有什么方法可以删除它吗? (div1
和div2
之间的差距应等于0px。
提前感谢您的帮助。
答案 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)
有两件事因为那里有图像
- 醇>
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
}
答案 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>