asp.net - 根据转发器中包含的数据量向下调整 div 宽度，直到最大宽度

Question

我有一个转发器包裹在一个 div 中，它将结果显示为水平文本。 div 设置为 450px 的最大宽度，这会导致结果换行到下一行，这是完美的，但当宽度小于 450px 的结果值时，宽度仍为 450px。我希望将 div 的大小调整到结果的宽度。

这是 div 中的数据包装:

当结果数量较少时会发生这种情况:

这是我希望发生的事情:

这是我的 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>

编辑:

将 display:table; 应用于 css 后，我丢失了每个结果之间的空格:

通过在我调用以检索结果的 SQL 存储过程中的 select 语句中添加一个空格 + ' ' 来解决这个问题。

Answer 1

您需要添加的只是display: table。它的作用类似于内联 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;
}