问题描述:

I am trying to use shrink to fit on #container. It works perfectly until the elements it contains wrap. This causes it to expand to 180px.

CSS:

#screen-dimensions

{

width: 250px;

height: 100px;

background-color: yellow;

}

#container

{

display: table;

background-color:red;

border: 5px solid pink;

}

#container > div

{

display: inline-block;

width: 160px;

background-color: blue;

border: 5px solid lightBlue;

}

HTML:

<div id="screen-dimensions">

<div id="container">

<div>content</div>

<div>content</div>

</div>

</div>

I understand why this behavior occurs but I haven't been able to find any workarounds.

Can this be fixed?

网友答案:

I achieved that by playing around with the display properties:

#container
{
    display: inline-block;
}
#container > div
{
    display: block;
}

See: http://jsfiddle.net/feeela/Anc3v/

相关阅读:
Top