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。这样容器就可以包含所有项目所需的大小。
• 在overflow:auto上设置body以显示滚动条。
• 更正每个项目的width和height。
• 将white-space: nowrap;添加到容器中以强制项目停留在一行上。

Answer 2

添加此CSS样式：）

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

但严肃的说明--DIV显示（有点）你的所有图像，只有图像5-9在下一行，因为容器有固定的高度，然后它们被隐藏。