1

我正在为客户创建一个音乐网站，并尝试使用单页布局，以便音乐播放器在导航期间不会被中断。我在每个部分的 div 上使用了 css 属性 overflow:hidden，但由于某种原因，当我在其中嵌套另一个 div 时，它无法识别 overflow:auto 元素。这是有问题的，因为有计划的内容不适合单个页面，例如评论、帖子和图像缩略图。

该页面位于此处： http: //www.dennispiano.com

和我的测试服务器（有一些未部署的内容）在这里：http://205.209.87.168/DennisMusic/index.php

我正在谈论的一个示例是图像部分（在测试服务器链接上，尚未部署到实时站点）

相关 HTML

<div class="contentbody">

<div id="images" class="pageSection">
     <h1 style="padding:0 0 0 10px; background-color:#00c7c0;">
     <img src="images/pageAssets/images.png" alt="Home" height="25" width="83" /></h1>
     <?php include('lib/php/thumbnails.php'); ?>
</div>

<!-- end .contentBody --></div>

相关PHP 

//Variable Declaration (remove after xml structure creation)
$images=80;
$thumblimit=5;
$imagelines=($images/$thumblimit);

//

echo '<div class="sectionContent">'; //<-- busted content scrolling div
//Display Thumbnail tiles
for($i=0;$i<$imagelines;$i++) {

     echo '<div>';
     for($ii=0;$ii<$thumblimit;$ii++) {
          echo '<div style="display:block; margin:0 10px 0 10px; border:1px solid #fff;     background-color:#c90; width:50px; height:50px; float:left;"></div>';
     }
     echo '</div><br /><br /><br /><br />';

}

echo '</div>';

?>

相关CSS

.contentBody {
    overflow:hidden;
}

.pageSection {
        width:100%;
        min-height: 700px;
        display:block;
}

.sectionContent {
        overflow:auto;
        display:block;
        width:100%;
}
4

0 回答 0