Question

我正在尝试在JQuery中创建一个像元素一样的flash头，它有三个淡入其他图像的图像。我在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/

Answer 2

您目前在HTML中使用元素ID s1，s2和s3。但是，您要为类 s1，s2和s3定义CSS。

或者：

使用课程pics
或者更改CSS以使用id选择器，例如。 #s1，#s2

使用JQuery时排除Divs

2 个答案: