html - 如何使用 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 小提琴示例

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

希望这可以帮助。