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

DIV是块级元素。这意味着他们将按默认性质进行堆叠。你必须以某种方式覆盖它。两种选择是：

#contentImages > div { display:inline-block; }

或

#contentImages > div { float:left; }

希望有所帮助。

修改的

请参阅下面的评论，了解如何在旧浏览器中支持内联块并清除浮动容器，具体取决于您偏好的方法。

Answer 2

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

Answer 3

默认情况下，div的样式为display: block，这会使元素占用所有可用的水平空间。要更改此设置，请添加以下规则：

#contentImages > div {
    display: inline-block;
}

display^MDN

Answer 4

正如您在本页的其他答案中所看到的，在所有浏览器中排除三个内容是一个婊子。

我是通过在CSS中应用三列布局在我的网站上完成的。设置需要花费更多精力，但它适用于所有浏览器并且非常强大。

有许多描述，但这是我使用的那个： http://matthewjamestaylor.com/blog/perfect-3-column.htm 这使用百分比而不是设置大小，因此适用于许多屏幕配置。

您还可以通过嵌套列来制作可行但不可读（且不可维护的？）html。（我有一个三列布局，在三列布局的中间列内。看起来很棒！ - 页面，而不是HTML;）

祝你好运！

Answer 5

使用css3 box模式获得最佳效果。

#contentImages{
    display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
}

一个div内有3个div，试图将它们并排放置

5 个答案: