0

对此有一些问题。我使用 c# 代码将目录中的文件绑定到 asp.net 中继器中。这是有效的，但我的问题不存在（我认为）。它可能与 CSS 或只是 ul 的性质有关。

为什么我的列表会超出设置的母版页内容页面区域？

我的内容页面：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<div>
 <ul id="pg">
<ASP:Repeater id="repeater1" runat="Server" >
 <ItemTemplate>  
<li> <img src='<%#DataBinder.Eval(Container.DataItem,"n1") %>'> </li>
 </ItemTemplate>  
 </ASP:Repeater>    
 </ul>
 </div>
</asp:Content>

CSS：

#pg {  width: 1200px; background: white; }
#pg li {  list-style: none; width: 200px; height: 200px; overflow: hidden; float: left; z-index: 2; opacity: .8; }
#pg li.active { opacity: 1; }
#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }
#pg li img { display: block; width: 100%; }
#pg li p { color: white; margin: 10px 0; font-size: 12px; }

jquery （注意 jphotogrid.js 中没有样式 .. 所以不会在这里列出。

$(文档).ready(函数(){

    $('#pg').jphotogrid({
        baseCSS: {
            width: '175px',
            height: '175px',
            padding: '5px'
        },
        selectedCSS: {
            top: '50px',
            left: '250px',
            width: '700px',
            height: '700px',
            padding: '5px'
        }
    });

});

我渲染的标记：

    <div>
    <div>
     <ul id="pg">
    <li> <img src='products/r/1.JPG'> </li>
    <li> <img src='products/r/127-2800_IMG - Copy (5).JPG'> </li>
    <li> <img src='products/r/127-2800_IMG - Copy (6).JPG'> </li>

    .. like 100 more of these many more of these

    <li> <img src='products/r/127-2800_IMG - Copy (7).JPG'> </li>
   </ul>
    </div>
    </div>
    <div>
    some text from my master page that follows the content page but is being 
    stepped on by ul/li content.
    </div>

我尝试用跨度包装。看着CSS。想知道这是否是本机行为以及我如何解决它。

4

1 回答 1

0

当您指定 afloat:left时，该元素将从正常的页面流中取出并扔到左侧。

结果，您的列表正在li建立，但它超出了母版页的内容区域，因为它不再关心它。

您是否试图让母版页的以下内容出现在项目下方？如果是这样，请添加：

<div style="clear:both;">&nbsp;</div>

之后</ul></div>

于 2012-09-02T17:01:27.623 回答