Question

我正在创建一个图片滑块。我有一个父母<div>，会掩盖一个更宽的孩子：

<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>

我的父级具有固定宽度，并在内容溢出时显示滚动条：

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

它的孩子.strip应该展开以将其所有子项包含为水平行。在过去，为了确保.strip可以包含其子女而不清除，我会：

总结预定数量的孩子的宽度并对其进行硬编码
通过javascript

由于我定位现代浏览器，我想也许使用flexbox可以解决问题：

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

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

它非常接近，但我的所有item都堆叠在一起：

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的浏览器。

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

1 个答案: