html - 如何在固定元素旁边显示水平滚动列表？

Question

我试图在水平滚动的 div 中显示图像列表(等高)。这很有用，但是当我想要一个固定图像时 - 一个“封面”图像出现在容器内最左边的布局被搞砸了。

下面是我工作的 CSS 和 HTML。 如果运行代码片段，您会看到列表跳转到下一行，而不是停留在“封面”图像附近并水平滚动。这是 jsfiddle - http://jsfiddle.net/6x66dLdy/

我可以使用 javascript 以编程方式设置 #list 的宽度来解决它，但如果可能的话，我想单独使用 CSS 来解决。

#container {
  height: 120px;
  background: #ccccff;
}

#cover {
  height: 100px;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

#cover img {
  border: 2px solid #cc0000;
}

#list {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100px;
  margin: 10px 0;
  display: inline-block;
}

.item {
  height: 80px;
  margin: 10px 5px;
  display: inline-block;
}

<div id="container">
    <div id="cover">
        <img src="http://placehold.it/160x100"/>
    </div>
    <div id="list">
        <div class="item">
            <img src="http://placehold.it/120x80"/>
        </div>
        <div class="item">
            <img src="http://placehold.it/60x80"/>
        </div>
        <div class="item">
            <img src="http://placehold.it/120x80"/>
        </div>
        <div class="item">
            <img src="http://placehold.it/120x80"/>
        </div>
        <div class="item">
            <img src="http://placehold.it/120x80"/>
        </div>
    </div>
</div>

Answer 1

发生这种情况是因为您没有指定宽度。您必须为内部 div 和容器提供宽度。建议为容器指定明确的宽度，因为这样您就可以安全地为子项指定百分比宽度。

在您的用例中，您必须计算多少宽度对您的 div#cover 更安全，然后使用 CSS calc 计算剩余的宽度分配给列表。另外，请记住考虑您的利润。

相关 CSS:

width: calc(100% - 240px);

你的 fiddle : http://jsfiddle.net/abhitalks/6x66dLdy/1

最好指定一个合适的 box-sizing。因此，请将其包含在您的 CSS 顶部:

* { box-sizing: border-box; }

.