resize div width down based on the amount of data

问题:

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.

This is the data wrapping ok in the div:

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

This is what I would like to happen:

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

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>

EDIT:

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

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

回答1:

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

回答2:

Try setting the width to auto in the 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;
        width: auto;
    }

if it does not work set the width of all the other containers inside the div to auto as well.