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建议的空块来阻止它们。

See sample jsFiddle
Clearfix reference

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。

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

3 个答案:

问题：

解决方案：

DEMO