HTML水平擴展div以適合兒童

Question

我正在創建一個水平滾動的網站。 有一個容器div，我想保持固定的高度，但可以根據需要水平擴展以適合其中的內容。 目前，div僅水平擴展到頁面寬度。 實際上有9張圖像要顯示，但僅顯示前4張。 請參見下面的代碼和圖像。 如何使容器div水平展開以顯示所有圖像？

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>');

此屏幕快照是在Andrei建議的以下更改之后進行的。 粉色區域是容器div。 圖像似乎在其下方破裂。

Answer 1

從您發布的代碼中，執行以下操作應該可以：

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 。 這樣，容器將達到容納所有項目所需的大小。
• 在body上設置overflow:auto以顯示滾動條。
• 糾正每個項目的width和height 。
• 添加white-space: nowrap; 到容器上以迫使物品停留在一條線上。

Answer 2

添加此CSS樣式:)

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

但要特別注意的是-DIV顯示（全部）您的所有圖像，只有5-9圖像在下一行，並且由於容器的高度固定，因此它們被隱藏了。