0

結果を水平テキストとして表示する div でラップされたリピーターがあります。div は最大幅 450px に設定されているため、結果は次の行に折り返されますが、結果の幅が 450px 未満の場合、幅は 450px のままです。結果の幅に合わせて div のサイズを変更したいと思います。

これは、div で OK をラップするデータです。

結果ラッピングOK

結果の数が少ない場合は、次のようになります。

結果のサイズが縮小されない

これは私がしたいことです：

結果のサイズが縮小されました

divのCSSは次のとおりです。

        div.SelectedStudents {
            background-color: lightyellow;
            font-family: verdana, tahoma, Helvetica, sans-serif;
            font-size: 11px;
            border:solid 1px black;
            max-width:450px;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            padding: 5px;
            line-height:1.5em;
        {

ここに私のdivとリピーターがあります:

           <div class="SelectedStudents"> 
               <asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsProgressCohorts" onitemdatabound="Repeater1_ItemDataBound">
                   <ItemTemplate>
                       <asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' />
                    </ItemTemplate>
                    <AlternatingItemTemplate>
                        <asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' Font-Bold="True" />
                    </AlternatingItemTemplate>               
                    <FooterTemplate>
                        <asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" />
                    </FooterTemplate>
                </asp:Repeater>
           </div>

編集：

css に適用display:table;した後、各結果の間のスペースを失います。

表示:テーブル;

+ ' '結果を取得するために呼び出している SQL ストアド プロシージャ内の select ステートメントにスペースを追加することで、これを回避しました。

4

2 に答える 2

2

追加する必要があるのはdisplay: table. コンテンツに合わせて縮小するという点で inline-block と同様に機能しますが、要素がインラインに表示されることはありません。

http://cssdeck.com/labs/12tg3bge

div.SelectedStudents {
    background-color: lightyellow;
    font-family: verdana, tahoma, Helvetica, sans-serif;
    font-size: 11px;
    border:solid 1px black;
    max-width:450px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    line-height:1.5em;
    display: table;
}
于 2013-06-12T12:15:16.967 に答える