Question

遇到一些问题。我使用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中没有样式..所以不会在这里列出。

（文档）$。就绪（函数（）{

    $('#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。想知道这是否是本机行为以及我如何解决它。

Answer 1

指定float:left时，该元素将从正常页面流中取出并向左抛出。

因此，您的li列表已经建立，但它已超过母版页的内容区域，因为它不再关心它。

您是否尝试将主页的以下内容显示在项目下方？如果是这样，请添加：

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

在</ul></div>

之后

保持html在asp.net contentplaceholder中列出ul / li

1 个答案: