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

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 s和容器提供宽度。建议给容器明确的宽度，因为你可以安全地给儿童分配宽度。

在您使用的情况下，您必须计算您的div#cover的宽度是多么安全，然后使用CSS calc来计算要分配给列表的宽度的其余部分。另外，请记住你拥有的利润。

相关CSS：

width: calc(100% - 240px); 

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

它始终是最好指定一个合适的box-sizing。因此，将其包含在CSS的顶部：

* { box-sizing: border-box; } 

。

Answer 2

测试此

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 3

浮法#cover左和从#list除去display: inline-block。

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

小提琴：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 4

要回答你的问题，你可以为ID指定min-width:800px;#container 因此不会跳下，并停留在主画面
这里旁边就是一个例子http://jsfiddle.net/6x66dLdy/5/