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以适合儿童

回答

相关问题