如何使用CSS在同一行上设置两个元素

Question

.image{ 
position:absolute; 
display:inline-block; 
} 

目前我有2个图像具有相同的大小，我希望同样让它们共享屏幕。 img a左手边，img b右边。问题是，如果我将它设置为类，即使使用内联块，两个图像也会重叠。限制是我不能使用亲戚。因此，有什么办法可以做到这一点？我是否需要为每个图像设置一个ID来执行此操作？谢谢

Answer 1

您是否试图使它们的宽度共享视口的50％，并且高度是视口的100％？这可以实现这种方式：

HTML：

<img src="source.html" /> 
<img src="source.html" /> 

CSS：

html, body { 
    width: 100%; 
    height: 100%; 
} 

img { 
    ​width: 50%; 
    height: 100%; 
    float: left; 
}​ 

JS Fiddle Example

Answer 2

这是我试过的示例代码。

<div id="container"> 
    <img src="http://www.rational-animal.org/wp-content/uploads/2012/02/Facebook-logo-small-300x300.png" height="100" width="100" /> 
    <img src="http://www.rational-animal.org/wp-content/uploads/2012/02/Facebook-logo-small-300x300.png" height="100" width="100" /> 
</div> 

，这将是CSS

img { 
    width: 50%; 
    height: 100%; 
    float: left; 
    display: inline-block 
} 

上述结果。那是你在找什么？

PS：由于绝对定位，图像越来越重叠。

希望这会有所帮助。