我如何设置包含文本的 DIV
样式,以便在 min-width
和 max-width
之间取最小长度>?
例如,如果我将最小值和最大值设置为 200 和 400 像素,我想要:
- 文本短于 200px 的 div 宽度为 200px
- 文本宽度在 200 像素到 400 像素之间的 div
- 要换行的文本超过 400 像素的 div
我制作的这个 jsFiddle 解释得更好:http://jsfiddle.net/LHFSn/ ...这听起来简单明了,但我似乎无法理解。
不,显而易见的是:
min-width: 200px;
max-width: 400px;
...根本没有给我想要的东西。
最佳答案
设置
display: inline-block
将允许您在宽度方向上获得所需的结果,但也意味着元素将内联显示,也就是说,如果它们适合,则一个接一个地显示。
您可以通过将元素包装在 block 式容器中来避免这种情况。虽然这听起来远非理想,但这是我脑海中第一个可行的想法。
扩展你的进一步问题,你可以 float 这些元素,将它们包装在一个也内联显示的容器中,然后使用 Rúnar Berg 的空 block 建议来阻止它。
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;
}
关于html - 最小和最大宽度之间的文本容器的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23276325/