如何使用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：由于绝对定位，您的图像会重叠。

希望这会有所帮助。