如何在固定項目旁邊顯示水平滾動列表？

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/