根据包含在中继器内的数据量，调整div的宽度，最大为max-width [英] resize div width down based on the amount of data contained within repeater and up to a max-width

问题描述

我有一个中继器包裹在一个div，显示结果作为水平文本。 div设置为最大宽度为450px，这导致结果包装到下一行是完美的，但是当宽度小于450px时，宽度保持为450px。我想要div调整到结果的宽度。

I have a repeater wrapped in a div which displays results as horizontal text. The div is set to a maximum width of 450px which causes the results to wrap onto the next line which is perfect, but the width remains 450px when there are less than 450px width's worth of results. I would like the div to resize down to the width of the results.

这是数据包装确定在div：

This is the data wrapping ok in the div:

是当有少量结果时发生的情况：

This is what happens when there are a small number of results:

这是我想要发生的：

这里是我的css的div： p>

Here is my css for the div:

        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和中继器：

Here is my div and repeater:

           <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>

编辑：

在应用 display：table; 到css后，我丢失了每个结果之间的空格：

After applying display:table; to css I lose the spaces between each result:

通过添加一个空格 +''到我的SQL语句存储过程中我调用检索结果。

Got around this by adding a space + ' ' to my select statement inside the SQL stored procedure I am calling to retrieve the results.

推荐答案

您需要添加的是 display：table 。它的行为类似于inline-block，因为它收缩以适合内容，但没有使元素显示为内联。

All you need to add is display: table. It acts similar to inline-block in that it shrinks to fit the content, but without having the element appear inline.

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;
}

这篇关于根据包含在中继器内的数据量，调整div的宽度，最大为max-width的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！