具有“空白:nowrap”的元素的宽度不适应子内容
Posted
技术标签:
【中文标题】具有“空白:nowrap”的元素的宽度不适应子内容【英文标题】:Width of element with 'white-space: nowrap' doesn't adjust to child content 【发布时间】:2014-04-11 04:47:12 【问题描述】:我正在尝试使用 overflow-x: scroll 和 white-space: nowrap 创建一个带有(平铺)背景图像的水平滚动窗格。窗格跨越任意数量的元素。
CSS:
.frame
overflow-x: scroll;
.pane
background-image: url(free-tile-floor-texture.jpg);
background-repeat: repeat;
white-space: nowrap;
.item
display: inline-block;
width: 150px;
height: 50px;
background-color: grey;
html:
<div class="frame">
<div class="pane">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
fiddle demo
我希望背景图块自动跨越窗格的整个宽度,包括其所有项目元素。目前它只填充到框架宽度。罪魁祸首似乎是窗格宽度属性 - 它不适应窗格内容的整体宽度。
Ofc,它通过手动调整宽度属性来工作,但我需要它动态调整。
如何让窗格的背景图像填满窗格的整个宽度?有没有其他方法可以达到同样的效果?
【问题讨论】:
【参考方案1】:简答:
block
元素,如<div>
默认采用其父级的宽度(如果未设置width
),并且不会进一步扩展(即使子级内容溢出)。
inline
元素不是这种情况,例如 <span>
,它将取而代之的是子内容的宽度。
因此,通过使用inline-block
,您将受益于子内容的宽度和高度,并拥有您想要的。
(存在其他解决方案,例如:float: left;
、position: absolute;
、...)
更多解释:
我遇到了同样的问题,我想创建一个旋转木马(或 OP 要求的带有平铺的水平滚动窗格),最后有填充,因此最后一项不会折叠到视口的边缘.
所以基本上,您将拥有可滚动的 carrousel 元素(frame
),然后是带有填充的图块的容器(pane
),最后是图块(item
s):
body
margin: 20px;
.frame
overflow-x: scroll;
.pane
background-color: grey;
padding: 20px;
white-space: nowrap
.item
background-color: red;
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
.item:last-child
margin-right: 0;
<div class="frame">
<div class="pane">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
如您所见,填充在开始时起作用,但在结束时不起作用,因为pane
的宽度不会超出父宽度(在本例中为frame
的宽度)。
在pane
上添加display: inline-block;
可以解决问题:
body
margin: 20px;
.frame
overflow-x: scroll;
.pane
background-color: grey;
display: inline-block;
padding: 20px;
white-space: nowrap
.item
background-color: red;
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
.item:last-child
margin-right: 0;
<div class="frame">
<div class="pane">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
现代解决方案(没有white-space: nowrap;
):
与 OP 关于white-space: nowrap;
规则的问题略有不同,如果您正在寻找更现代的解决方案来创建轮播,您可以使用flex
规则来实现这一点,因为弹性容器中的项目将默认情况下不换行,它也会使 CSS 更简洁:
body
margin: 20px;
.frame
overflow-x: scroll;
.pane
background-color: grey;
display: inline-flex;
padding: 20px;
.item
background-color: red;
width: 100px;
height: 100px;
margin-right: 20px;
.item:last-child
margin-right: 0;
<div class="frame">
<div class="pane">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
【讨论】:
【参考方案2】:将此行添加到.pane
display: inline-block;
【讨论】:
通过添加一个解决问题的小解释为什么,答案会更有帮助。 CSS 已经够猜测了……【参考方案3】:您可以在作为整个面板的框架中定义背景图像
http://jsfiddle.net/erenyener/9u29k/6/
.frame
overflow-x: scroll;
background-image: url(http://store.got3d.com/products/30-tile-floor-textures/thumbnails/free-tile-floor-texture.jpg);
background-repeat: repeat;
【讨论】:
但是背景图像跟随框架,而不是面板。项目滑过背景图像而不是停留在它上面。所以不是真正解决问题的方法。以上是关于具有“空白:nowrap”的元素的宽度不适应子内容的主要内容,如果未能解决你的问题,请参考以下文章
怎么让div的宽度不变,高度自适应内容的高度,新手求举例,谢谢