css - 绝对定位。需要帮助显示 3 张图片而不是 1 张图片

Question

    </div>

<div style="position:absolute;top:160px;left:535px;"><img src="splash.png"></div>
<div style="position:absolute;top:160px;left:535px;"><img src="splash2.png"></div>
<div style="position:absolute;top:160px;left:535px;"><img src="splash3.png"></div>
<!-- Press Logos -->
<div align="center">

我怎样才能让所有三个飞溅图像水平显示...

Answer 1

你可以

• 给每个 div 一个不同的 x 位置（最直接的方法，真的）

• 将它们放入足够宽度的容器中，并给容器position: absolute而不是周围的 div

Answer 2

尝试将您的代码更改为如下所示：

<div style="position:absolute;top:160px;left:535px;">
    <img src="splash.png"><img src="splash2.png"><img src="splash3.png">
</div>

Answer 3

“水平显示”是指它们在一条线上彼此相邻吗？除非没有足够的空间，否则标记中的图像会自然地执行此操作，在这种情况下，它们会包裹到下方的空间。

<div>
    <img src="splash.png" />
    <img src="splash2.png" />
    <img src="splash3.png" />
</div>

您可以将样式应用于周围的 div 以将图像居中放置等。

此外，您的原始标记示例有一些错误的标记。您的图像标签应该是自动关闭的（即以 /> 结尾，而不是 >）。

Answer 4

您还可以使用浮点数：

#header
{
     height: 100px; /*or something */
 }
#header img
{
      float: left;
      margin: 20px; /*change the margin(s) as you need */
}