找到你要的答案

Q:joining two pics seamlessly in a div

Q:连接两个图片无缝地在一个div

I have two pics pic1.png (100px x 20px) and pic2.png (100px x 380px) which each are inside a link and should look like one pic of 100px x 400 px. Unfortunally (at least in Firefox and IE) as a result there is a visible gap of several px between these two pics.

Website-Source (please excuse that I put it all into one line - but I did not want to possibly falsify the exact code by formatting):

<div style="display:inline-block;width:100px;height:400px;max-height:400px"><a href="someurl"><img alt="somealt" title="sometitle" src="pic1.png"></a><a href="someurl"><img alt="somealt" title="sometitle" src="pic2.png"></a></div>

Can you tell me what is wrong in the above Source and how I could fix it?

我有两张pic1.png(100×20px)和pic2.png(100×380px)每个内部链接应该像一个PIC 100px×400像素。不幸的是(至少在火狐和伊江)结果有几个PX这两照片之间的差距明显。

网站源码(请原谅,我把它放在一个线,但我不想可能是伪造的确切代码格式):

<div style="display:inline-block;width:100px;height:400px;max-height:400px"><a href="someurl"><img alt="somealt" title="sometitle" src="pic1.png"></a><a href="someurl"><img alt="somealt" title="sometitle" src="pic2.png"></a></div>

你能告诉我上面的来源有什么问题吗?

answer1: 回答1:

The images are being rendered one below the other, as if they were text, in different lines. Thus, the line-height CSS property is causing a visible space within them, in the same way that you expect some spacing between lines of text.

You can solve this by adding line-height: 0; to the style of the div.

See an example: JSFiddle

图像被呈现在另一个下方,好像它们是文本,在不同的行。因此,线的高度CSS属性导致在可见的空间,在你所期望的文本行之间的间距相同的方式。

你可以解决通过增加线高度:0;对分部的风格

看一个例子:JSFiddle

answer2: 回答2:

you should add border="0" attribute to the images, the fact that the browsers add a border of 1 or 2 pixels to the images that are inside an anchor tag and use the default "link" styling, probably you are getting the space between the images.

<a href="someurl"><img alt="somealt" title="sometitle" src="pic1.png" border="0"></a>

or in CSS file that you're including, this will make that any image inside an anchor tag has no border:

a img { border: 0; }

你应该添加边界=“0”属性的图像,事实上,浏览器添加一个边界的1或2像素的图像内的锚标签和使用默认的“链接”的造型,也许你得到的空间之间的图像。

<a href="someurl"><img alt="somealt" title="sometitle" src="pic1.png" border="0"></a>

或者,你的CSS文件包括,这将使内部锚标记任何图像没有边界:

a img { border: 0; }
answer3: 回答3:

http://jsfiddle.net/njwx47tg/
Why don't you use float:left? to the a tag?

http://jsfiddle.net/njwx47tg/
Why don't you use float:left? to the a tag?

answer4: 回答4:
<div style="display:inline-block;width:100px;height:400px;max-height:400px;margin: 0px; padding: 0px; border: 0px;"><a href="someurl"><img alt="somealt" title="sometitle" src="pic1.png"></a><a href="someurl"><img alt="somealt" title="sometitle" src="pic2.png"></a></div>

Add:

margin: 0px;
padding: 0px;
border: 0px;
<div style="display:inline-block;width:100px;height:400px;max-height:400px;margin: 0px; padding: 0px; border: 0px;"><a href="someurl"><img alt="somealt" title="sometitle" src="pic1.png"></a><a href="someurl"><img alt="somealt" title="sometitle" src="pic2.png"></a></div>

添加:

margin: 0px;
padding: 0px;
border: 0px;
html  css