HTML水平展開div以適合兒童

我正在創建一個水平滾動的網站。有一個容器div，我想保留一個固定的高度，但根據需要水平擴展，以適應其內的內容。目前div只能水平擴展到頁面寬度。實際上有9個圖像要顯示，但只顯示前4個。查看下面的代碼和圖片。如何使容器div水平展開以顯示所有圖像？HTML水平展開div以適合兒童

enter image description here

CSS：

body 
{ 
    background-color:#dbdbdb; 
} 

div.infinite-container 
{ 
    background-color:#db0080; 
    height:180px; 
} 

img.infinite-item 
{ 
width="320"; 
height="180"; 
margin-right:8px; 
margin-bottom:8px; 
display:inline-block; 
} 

.infinite-more-link 
{ 
visibility:hidden; 
}

PHP：

<div class="infinite-container">'); 


if ($num_results > 0) 
{ 
    $array = array(); 
    while ($row = mysql_fetch_assoc($result)) 
    { 
     $array[] = $row; 
    } 

    for ($i = 0; $i < $numImagesPerPage; $i++) 
    { 
     $filePath = "animations/".$array[$i]['animationid'].".gif"; 
     echo('<img class="infinite-item" src="'.$filePath.'"/>'); 
    } 
}  

echo('</div>');

這張截圖是低於安德烈建議的更改後。粉色區域是容器分區。圖像似乎在它下面突出。

enter image description here

來源

2014-05-24 Simon

這是一個寫錯或故意：'width =「320」; height =「180」;'？ – Andrei

肯定應該是'width：320px'和'height：180px' :) – DarkSide

爲什麼你要容器以這種方式展開？我推薦一種旋轉木馬或色帶，而不是無限期地擴大空間。 – Zarathuztra

從你的代碼貼出來，做這樣的事情應該工作：

body 
{ 
    background-color:#dbdbdb; 
    overflow:auto; 
} 
div.infinite-container 
{ 
    background-color:#db0080; 
    height:180px; 
    display:inline-block; 
    white-space: nowrap; 
} 

img.infinite-item 
{ 
    width: 320px; 
    height: 180px; 
    margin-right:8px; 
    margin-bottom:8px; 
    display:inline-block; 
}

的jsfiddle例如：

http://jsfiddle.net/S6Abd/

這樣做是：

設置顯示模式到inline-block在容器上。通過這種方式，容器將盡可能地容納所有物品。
設置overflow:auto在body顯示滾動條。
更正每個項目的width和height。
將white-space: nowrap;添加到容器以強制物品停留在一條線上。

來源

2014-05-24 22:53:04 Andrei

嗨，我已經試過這個謝謝，但它仍然不是水平超出頁面的寬度顯示。我已將另一張照片附加到原始問題。另外，我不知道需要顯示多少圖片，它可能會多於9個，這就是爲什麼我無法初始設置容器div的寬度。請任何想法？ – Simon

更新了我的答案並添加了jsFiddle來證明它的工作原理。它從容器中缺少了「空白：現在」。抱歉。 – Andrei

非常好，謝謝 – Simon

添加這個CSS樣式:)

div.infinite-container 
{ 
    width:2952px; /* (320 + 8) * 9 = 2952 */ 
}

但在嚴重的注意 - DIV節目（種）所有的圖像，只有圖像5-9在下一行，因爲容器有固定的高度，然後隱藏起來。

來源

2014-05-24 22:52:47 DarkSide

如果有更多的項目呢？因爲它們是用'for（$ i = 0; $ i <$ numImagesPerPage; $ i ++）生成的' – Andrei

當然這個答案（第一部分）是一種笑話，但作者還提到'實際上有9個圖像可以顯示......所以，我可以假設'9'可以被硬編碼。 – DarkSide

在這種情況下'overflow：auto'和'display：inline-block'應該能夠做到這一點，但我不確定作者是否真的想要這樣做。在屏幕上的可見區域之外擴展容器div有什麼意義？這是否會成爲某種「圖像滑塊」？ – DarkSide

HTML水平展開div以適合兒童

回答

相關問題