html - 一个 div 内的 3 个 div，试图让它们并排

Question

我在 1 个 div 中有 3 个 div，就像这样......

<div class="contentImages">

<div id="slideshow">    
<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />    
<img src="upload/<?php echo $array['image2'] ?>" height="200" />    
<img src="upload/<?php echo $array['image3'] ?>" height="200" />    
</div>

<div id="slideshow2">    
<img src="upload/<?php echo $array['image4'] ?>" height="200" class="active" />   
<img src="upload/<?php echo $array['image5'] ?>" height="200" />    
<img src="upload/<?php echo $array['image6'] ?>" height="200" />    
</div>


<div id="slideshow3">    
<img src="upload/<?php echo $array['image7'] ?>" height="200" class="active" />    
<img src="upload/<?php echo $array['image8'] ?>" height="200" />    
<img src="upload/<?php echo $array['image9'] ?>" height="200" />    
</div>

</div>

采取 from here .

目前，div 位于彼此下方，但我正试图让它们并排放置......有什么想法吗？

这是CSS:

#slideshow {
    position:relative;
    height:200px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}


#slideshow2 {
    position:relative;
    height:200px;
}

#slideshow2 IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow2 IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow2 IMG.last-active {
    z-index:9;
}

#slideshow3 {
    position:relative;
    height:200px;
}

#slideshow3 IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow3 IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow3 IMG.last-active {
    z-index:9;
}

.contentImages{
    border:1px solid #CCC; 
    padding:10px; 
    margin:20px auto 0; 
    position:relative; 
    width:811px;
}

我在这里遗漏了什么吗？
我每个 div 有 3 张图像的原因是因为我有 3 个 jquery 幻灯片放映，每个 div 一个。 jquery 代码很长，所以我不需要它来解决这个问题。

如有任何帮助，我们将不胜感激，谢谢，
J

Answer 1

#contentImages {
    overflow:hidden;
}
#slideshow, #slideshow2, #slideshow3 {
    width:268px;
    overflow:hidden;
    float:left;
}