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图像在下一行，并且由于容器的高度固定，因此它们被隐藏了。