html - 图像堆叠在彼此之上而不是内联

Question

我已经在这几天了。在我的网站中，图像相互堆叠，因此它看起来是一个图像而不是 4 个。此外，它显示在页面上其他元素的顶部，如文本。在 Dreamweaver 中它显示我想要的方式，但在浏览器中，它显示如上所述。

我想要的:并排显示在页眉“关于我们”上方的四张图片。 这是代码:

<center>
<span class="images">
<img src="images/aboutUs/longJumpBoy.jpg" alt="longJumpBoy" longdesc="images/aboutUs/longJumpBoy.jpg">
<img src="images/aboutUs/groupPic.jpg" alt="groupPic" width="214" longdesc="images/aboutUs/groupPic.jpg">
<img src="images/aboutUs/kidOnTrack.jpg" alt="kidOnTrack" longdesc="images/aboutUs/kidOnTrack.jpg">
<img src="images/aboutUs/throwingKids.jpg" alt="throwingKids" longdesc="images/aboutUs/throwingKids.jpg">

 </span> 

</center>

    <h1>About Us</h1>        
<br /><br />
    <h2>Who are we?</h2> 
<p>
    The team is a USA Track and Field (USATF) certified running club. We compete locally and nationally. Our athletes are able to train in all disciplines in track and field, but the team is specialized in distance running. Our runners are registered to run in both USATF and Amateur Athletic Union (AAU) league events.
    <br />
    Practices are held primarily on El Paso's East side.
</p>
 <header>
    <h2>Mission Statement</h2>
</header>

这是CSS

.images img {
    display:inline-block;
    border-color: rgb(191,224,104);
    border-width: 3px;
    margin: auto
}

编辑:我编辑了代码，这里是我的 jsFiddle 的链接:http://jsfiddle.net/JaLb7/ .现在，浏览器中的图像显示在文本上方，但只有其中一个。此外，当我滚动时，图像不会随页面一起滚动，而是文本会在图像后面滚动。

我的问题图片:

Answer 1

您可以使用显示、文本对齐和空白:

你的 HTML

<span class="images">
<img src="images/aboutUs/longJumpBoy.jpg" alt="longJumpBoy" longdesc="images/aboutUs/longJumpBoy.jpg">
<img src="images/aboutUs/groupPic.jpg" alt="groupPic" width="214" longdesc="images/aboutUs/groupPic.jpg">
<img src="images/aboutUs/kidOnTrack.jpg" alt="kidOnTrack" longdesc="images/aboutUs/kidOnTrack.jpg">
<img src="images/aboutUs/throwingKids.jpg" alt="throwingKids" longdesc="images/aboutUs/throwingKids.jpg">
 </span> 

要应用的基础 CSS

.images {
display:block;
text-align:center;
white-space:nowrap;
}

注意，应该是像<p>这样的 block 元素或 <div>甚至 <figure>如果那是准确的话。

<center>不应该使用，一旦你知道如何申请就完全没用 margin:auto;和，或者，text-align:center; .