Today write css found pictures add up to exactly three pictures 900px, 900px tolerance is not a put down, because there is an interval between pictures, I guess is the browser space between the two img tags as a blank node .
The Internet to find a few good solutions:
1. img tag write more in a row
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
Before the effect of:
After effects:
2. On the parent img tag write: font-size: 0; // in solving this display: inline-block emerging issues also helped
<div style="font-size:0">
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
</div>
effect:
3. Use display: block (img inline element) // needs to float
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/>
效果:
4.使用letter-spacing属性
< Div style = "letter-spacing: -800px" > <-! Value letter-spacing, whether negative number will not overlap ->
< IMG the src = "/ I / eg_tulip.jpg" Alt = "tulip " height =" 100px " />
< IMG the src =" / I / eg_tulip.jpg " Alt =" tulip " height =" 100px " />
</ div >
effect:
Original: http: //www.cnblogs.com/zqzjs/p/4868325.html