Question

我试图在水平滚动div中显示图像列表（相等高度）。这很有效，但是当我想要一个固定的图像 - 一个＆＃34;封面＆＃34;图像呈现在最左边的容器中，布局被搞砸了。

以下是我工作的CSS和HTML。 如果您运行代码段，则可以看到列表跳转到下一行，而不是停留在＆＃34; cover＆＃34;图像和水平滚动。这是jsfiddle - http://jsfiddle.net/6x66dLdy/

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

向左移动#cover并从display: inline-block移除#list。

这将允许列表中的封面图像和图像为任何未知宽度。像其他答案一样在容器上设置固定宽度是不允许的。

小提琴：http://jsfiddle.net/6x66dLdy/4/

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

#cover {
  height: 100px;
  margin: 10px;
  float: left;
  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;
}

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

Answer 2

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

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

相关CSS ：

width: calc(100% - 240px);

你的小提琴： http://jsfiddle.net/abhitalks/6x66dLdy/1

最好指定一个合适的box-sizing。所以将它包含在CSS的顶部：

* { box-sizing: border-box; }

Answer 3

测试这个

http://jsfiddle.net/6x66dLdy/3/

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

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

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

#list {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100px;
  margin: 10px 0;
  width:600px;
    float:left
}

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

Answer 4

要回答您的问题，您可以为min-width:800px;指定#container 所以它不会跳下来留在主图旁边这是一个例子http://jsfiddle.net/6x66dLdy/5/

如何在固定项旁边显示水平滚动列表？

4 个答案: