3的div一個DIV中，試圖通過側

Question

，讓他們身邊，我裏面有1個格，像這樣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。

目前divs在彼此之下，但我試圖讓他們並排....任何想法？

這裏是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代碼很長，所以我不需要這個問題。

任何幫助將衷心感謝，感謝，
Ĵ

Answer 1

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

Answer 2

默認情況下，div s的風格與display: block，這使得一個元素佔用所有可用的水平空間給它。要改變這一點，添加以下規則：

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

• display^MDN

Answer 3

DIV是塊級元素。這意味着他們將按照默認的性質進行堆疊。你必須以某種方式覆蓋它。兩個選項將是：

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

或

#contentImages > div { float:left; } 

希望有所幫助。

編輯

看到有關如何支持inline-block的舊的瀏覽器和清算下面的評論浮動容器，這取決於你更喜歡哪一種方法。

Answer 4

正如您從本頁的其他答案中所看到的，在所有瀏覽器中排列三樣東西都是婊子。

我在我的網站上應用了CSS中的三列布局。 它需要更多的努力來設置，但它適用於所有瀏覽器，並且非常強大。

有許多描述在那裏，但這裏是我使用的一個： http://matthewjamestaylor.com/blog/perfect-3-column.htm 這將使用百分比，而不是集大小，所以它適用於很多的屏幕配置。

你也可以通過嵌套列使可行但不可讀（和不可維護？）html。我有一個三列布局，在三列布局的中間列內，看起來很棒！ - 頁面，而不是HTML;）

祝你好運！

Answer 5

使用css3框模式獲得最佳結果。

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