我有一点CSS麻烦。
我有一些div元素结构如下例所示。 有一个动态数量的class =“block”div，每个div都有一个固定的宽度：
<div class="outer-container"> <div class="inner-container"> <div class="block">text</div> <div class="block">text</div> <div class="block">text</div> <!-- More "block" divs here --> </div> </div>我的目标是找到一个基于CSS的解决方案。
显示class="block" div内联，而不包括新行。 支持可变数量的class="inner-container" div，如上所示，每个div都显示为自己的行。 让外部容器流畅地"shrink-wrap"以匹配其内容物的宽度。有什么建议么？
I'm having a little CSS trouble.
I have some div elements structured like the following example. There are a dynamic number of class="block" divs, each with a fixed width:
<div class="outer-container"> <div class="inner-container"> <div class="block">text</div> <div class="block">text</div> <div class="block">text</div> <!-- More "block" divs here --> </div> </div>My goal is to find a CSS-based solution that will.
Display the class="block" divs inline, without them wrapping to new lines. Support a variable number of class="inner-container" divs like the one above, each displayed as its own line. Have the outer container fluidly "shrink-wrap" to match the width of its contents.Any suggestions?
最满意答案
不是100％确定这是否是您正在寻找的，但它可能是一个开始：
http://jsfiddle.net/r4dEX/3/
通过将每个block元素设置为display: inline-block和white-space: nowrap ，它应该允许元素彼此并排放置，但如果内容长于可用空间，则不会换行到新行（而是block将转移到新的一行）。
每个inner-container将显示在其自己的行上（ display: block是div默认行为）。
将外部容器设置为display: inline-block将使其“收缩包装”以适合其内容。
Not 100% sure if this is what you're looking for, but it might be a start:
http://jsfiddle.net/r4dEX/3/
By setting each block element to display: inline-block and white-space: nowrap, it should allow the elements to sit alongside each other, but not wrap to a new line if the content is longer than the available space (instead the block will move to a new line).
Each inner-container will display on its own line (display: block is default behaviour for a div).
Setting the outer container to display: inline-block will cause it to 'shrink wrap' to fit its content.
更多推荐
发布评论