jquery - 使用 JQuery 排列 Div

Question

我正在尝试在 JQuery 中创建一个类似 flash header 的元素，它具有三个渐变为其他图像的图像。我将每组图像放在一个 div 中，但 div 在页面的下方垂直排列，我希望它们水平排列成一行。

目前我的CSS代码是:

div#demos{
  width:940px;
  border:0;
}

.s1{
  float:left;
  display:inline;
  background-color:#000000;
  width:225px;
  margin:0;
}

.s2{
  float:right;
  display:inline;
  background-color:#000000;
  width:225px;
  margin:0;
}

.s3{
  float:left;
  display:inline;
  background-color:#000000;
  width:225px;
  margin:0;
}

我的标记是:

<div id="demos">

    <div id="s1" class="pics">
        <img src="Image1.jpeg" width="200" height="200" />
        <img src="Image2.jpeg" width="200" height="200" />
        <img src="Image3.jpeg" width="200" height="200" />
    </div>


    <div id="s2" class="pics">
        <img src="Image4.jpeg" width="200" height="200" />
        <img src="Image5.jpeg" width="200" height="200" />
        <img src="Image6.jpeg" width="200" height="200" />
    </div>

    <div id="s3" class="pics">
        <img src="Image7.jpeg" width="200" height="200" />
        <img src="Image8.jpeg" width="200" height="200" />
        <img src="Image9.jpeg" width="200" height="200" />
    </div>
    <div style="clear:both"></div>     
</div>

Answer 1

将 .s1 .s2 .s3 更改为 #s1 #s2 #s3 因为 # 代表一个“id”，这就是 s1、s2 和 s3 的含义

请看这里的例子: http://jsfiddle.net/NW4Ry/