Question

我试图让它成为包含其他较小的<div>元素（向左浮动）的<div>从屏幕上消失，而不是包裹，但我可以＆＃ 39;弄清楚。

您可以在此处查看问题示例 - http://pictures.dnsdiag.com/

以下是我到目前为止的CSS，这里是JS Fiddle的链接。有人可以帮我解决这个问题。

.banner{
    background: rgba(153,153,153,0.6);
    padding: 30px 0;
    text-align: center;
}

#author-links.banner{
    text-align: left;
    overflow: hidden;
}
#author-links .author-link{
    display: block;
    float: left;
    height: 200px;
    margin: 0 20px;
    position: relative;
    width: 300px;
    z-index: 10;
}
#author-links .author-link span.preview-image{
    display: block;
    height: 200px;
    width: 300px;
}

如果有人想知道，我希望这样做的原因是我可以包含一个jQuery插件，允许用户滚动图片（以比水平滚动条更美观的方式）。感谢。

Answer 1

很简单：

演示 http://jsfiddle.net/eQAH4/1/

#author-links{
    white-space: nowrap;
    /* rest of your styles... */
}

和

#author-links .author-link {
    display: inline-block;
    /* float:left; REMOVED */
    /* rest of your styles... */
}

Answer 2

<强> View working demo

在.banner{添加white-space: nowrap;

在#author-links .author-link中将display: block;更改为display: inline-block;并删除float: left;

.banner{
    background: rgba(153,153,153,0.6);
    padding: 30px 0;
    text-align: center;
    white-space: nowrap;
}

#author-links .author-link{
    display: inline-block;
    height: 200px;
    margin: 0 20px;
    position: relative;
    width: 300px;
    z-index: 10;
}

从屏幕扩展<div>元素而不是包装内容</div>

2 个答案: