CSS将div宽度调整为文本内容宽度，最大为X像素

Question

我正在寻找以下内容：

width: (200px or content width)

有什么想法吗？

[编辑] 添加了一个显示问题的小提琴：http://jsfiddle.net/9fhtsgfd/

Answer 1

默认情况下，

<div>为display: block，这意味着它将占用全宽。如果您只想占用其内容空间，可以尝试使用inline-block。

然后，如果您只希望<div>拉伸最多 X像素，则可以使用max-width。

＆＃13;

＆＃13;

div {
    display: inline-block;
    max-width: 200px;
    background-color: blue; /* for illustration only */
}

＆＃13;

<div>short content</div>
<div>longer content here longer content here longer content here longer content here longer content here longer content here longer content here </div>

＆＃13;

＆＃13;

＆＃13;

正如你所知，这也将divs放在一起。

Answer 2

听起来像是在寻找css属性min-width

min-width:200px;
width:auto;

对不起，也许我读错了这个问题。

max-width:200px;
display:inline-block; //xec is correct inline-block instead of display block lets it adjust from 0-max-width. I was missing that piece until he posted his answer. His is correct.

这将采用文本并将其包装为200px宽，但容器将从0 px扩展到200px。如果它不是以这种方式表现，那么你可能有其他的css导致问题。