最小和最大宽度之间的文本容器的CSS

Question

如何设置带有文本的DIV ，以便在最小min-width和max-width之间取最小长度？

例如，如果我将min和max设置为200和400px，我希望：

• 文本短于200px的div为200px宽
• 一个文本在200px和400px之间的div，以获得文本的宽度
• 包含文本长于400px的div

我做的这个jsFiddle解释得更好： http ： //jsfiddle.net/LHFSn/ ...听起来很简单直接，但我似乎无法弄明白。

不，显而易见：

min-width: 200px;
max-width: 400px;

...根本不给我我想要的东西。

Answer 1

您可以尝试将容器display设置为table ，将内部display为table-cell 。 它可能会让你陷入更多麻烦。

http://jsfiddle.net/fXxV3/3/

Answer 2

设置

display: inline-block

将允许您在宽度方向上实现所需的结果，但也意味着元素将以内联方式显示，即如果它们适合则彼此相邻。
您可以通过将元素包装在块样式容器中来避免这种情况。 虽然这听起来很不理想，但这是我头脑中的第一个想法。

扩展您的进一步问题，您可以浮动这些元素，将它们包装在也显示为内联的容器中，然后使用RúnarBerg建议的空块来阻止它们。

请参阅示例jsFiddle
Clearfix参考

HTML：

ACTUAL:
<div></div>
<div class="wrapper cf">
<div class="flex-text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
<div class="flex-text">
    Lorem ipsum dolor sit amet.
</div>
<div class="flex-text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div></div>
Further content

CSS：

.flex-text {
    min-width: 200px;
    max-width: 400px;
    display: inline-block;
    background: #def;
    float: left;
    clear: both;
}

/* this is just to show a 200px ruler for reference */
.flex-text:after {
    content: "";
    display: block;
    width: 200px;
    border-top: 4px solid black;
    margin: 0 0 20px 0;
}

.wrapper {
    display: inline-block;
    background: lightblue;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

Answer 3

问题：

.flex-text是一个非浮动块元素，因此默认情况下它会填充其父元素的宽度。 在这种情况下， max-width表示如果您的父级较大，则取max-width ，如果您的父级小于min-width则取该值。

另一方面，没有设置宽度的浮动块元素将缩小到其内容的大小。

解：

你基本上必须将你的最小/最大宽度移动到一个外部包装div，它不会像你那样浮动，然后将内部flex文本浮动到内部，这样背景将只填充包含文本的区域：

所以你的标记变成了：

<div class="wrapper">
    <div class="flex-text clearfix">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
    </div>
</div>
<div class="wrapper">
    <div class="flex-text clearfix">
        Lorem ipsum dolor sit amet.
    </div>
</div>
<div class="wrapper">
    <div class="flex-text clearfix">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>
</div>

所以你的css变成了：

.wrapper{
    min-width: 200px;
    max-width: 400px;
}

.flex-text {
    background: #def;
    float:left;
}

此外，由于您是浮动.flex-text ，请确保添加clearfix。

DEMO