0

これにはいくつかの問題があります。ディレクトリ内のファイルをasp.netリピーターにバインドするためにc＃コードを使用しています..それは機能していますが、私の問題はそこにはありません（私は思う..

リストが設定されたマスターページ コンテンツ ページ領域を超えて実行されるのはなぜですか?

私のコンテンツページ:

<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 にはスタイリングがないことに注意してください。そのため、ここではリストしません。

$(document).ready(function(){

    $('#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

を指定するfloat:leftと、要素は通常のページ フローから取り出され、左にスローされます。

その結果、li構築リストは作成されますが、マスター ページのコンテンツ エリアを超えてしまいます。

マスター ページの次のコンテンツをアイテムの下に表示しようとしていますか? もしそうなら、これを追加してください：

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

後に</ul></div>

于 2012-09-02T17:01:27.623 に答える