显示内联图像列表动态加载

时间:2014-06-28 09:22:46

标签: html css

我试图在div中加载图像列表,然后将它们放在水平位置(要滚动)

问题是我无法将它们一个接一个地加载到另一个中,使图像的维度保持百分比。

CSS:

 @charset"UTF-8";
 /* CSS Document */
 #collectionContainer {
     position:absolute;
     top:0px;
     left:0px;
     right:0px;
     bottom:15%;
     height:auto;
     width:auto;
     overflow-y: hidden;
     overflow-x: scroll;
 }
 #collectionContainer ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
 }
 #collectionContainer ul li {
     display:inline-block;
     float:left;
 }

页:

    <div id="collectionContainer">
        <ul>
            <? $dir='content/collection/' .$_GET[ 'collSea']. '/'; 
$dh=opendir($dir); 
while (false !==( $filename=r eaddir($dh))) { 
if ($filename !=="." && $filename !==".." ){ 
if (pathinfo($filename, PATHINFO_EXTENSION)=="jpg" ){ ?>
            <li>
                <img width="auto" height="100%" src="content/collection/<? echo($_GET['collSea']); ?>/<? echo($filename); ?>" />
            </li>
            <?  } } } ?>
        </ul>
    </div>

1 个答案:

答案 0 :(得分:1)

尝试:

li {
    width: 1000%;
}

它应该有用!