css - 扩展绝对定位元素的宽度以包含水平放置的子元素，而不管父元素的宽度如何

Question

我正在创建一个图像 slider 。我有 parent <div>这将掩盖更广泛的 child :

<div class="viewport">
    <div class="strip">
       <div class="item">
         <img src="1.png">
        </div>
        <div class="item">
          <img src="2.png" >
        </div>
        <div class="item">
            <img src="3.png">
        </div>
     </div>
</div>

我的parent是固定宽度的，当内容溢出时会显示滚动条:

.viewport{
    width:400px;
    height: 100px;
    overflow:scroll;
    margin-top:100px;
}

它的 child ，.strip , 应该展开以将其所有子级包含为水平行。过去，确保.strip可以在不清理的情况下收容它的 child ，我会:

• 总结出预定数量的 child 的宽度并对其进行硬编码
• 通过 javascript 计算未知数量 child 的宽度总和

由于我的目标是现代浏览器，我想也许可以使用 flexbox 来解决这个问题。 :

.strip{
    display: flex;
    height:100px;
}

.item{
    width:150px;
    flex-basis:150px;
    margin-right:10px;
}

它变得非常接近，但我所有的 item s 彼此堆叠:

http://jsfiddle.net/rytPP/14/

有没有办法把它们隔开，或者没有办法绕过.viewport的宽度限制？

Answer 1

如何只使用 display:inline-block; 作为 .item 和 white-space:nowrap; 作为 .strip?

.strip{
    height:100px;
    white-space:nowrap;
    font-size:0;
}

.item{
    width:150px;
    display:inline-block;
    margin-right:10px;
}

根据这个fiddle ...

这样你就不会局限于支持 flexbox 的浏览器。