防止div內容包裝

我需要開發簡單的圖像框控制與主要大圖像和縮略圖區域位於底部。這裏是我的代碼防止div內容包裝

.frame{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
.image{ 
 
    height: 75%; 
 
    width: 100%; 
 
    
 
    background: red; 
 
} 
 

 
.thumbs{ 
 
    height: 25%; 
 
    width: 100%; 
 
    
 
    background: blue; 
 
} 
 

 
.nav{ 
 
    height: 100%; 
 
    width: 5%; 
 
    display: inline-block; 
 
     
 
    background: green; 
 
} 
 

 
.left{ 
 
    float: left;  
 
} 
 

 
.right{ 
 
    float: right;  
 
} 
 

 
.thumb-images{ 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    width: 90%; 
 
    height: 100%; 
 
    
 
    background: orange; 
 
} 
 

 
.thumb{ 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    
 
    background: purple; 
 
}

<div class='frame'> 
 
    <div class='image'></div> 
 
    <div class='thumbs'> 
 
     <div class='nav left'></div> 
 
     <div class='thumb-images'> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
     </div> 
 
     <div class='nav right'></div> 
 
    </div> 
 
</div>

我需要拇指圖像內容區域（橙色），以隱藏其溢出（紫色長方形代表圖像）。我也需要水平滾動。我的標記有什麼問題？

來源

2015-10-20 Sergey

我不知道你問的問題是。 – Jesse

你的圖像是25％，你的背景是90％（90-（25x3）= 15）你想用剩下的15％做什麼？把它藏起來？展示給雙方？ – ochi

我不確定（你的問題不太清楚），但我認爲答案可能是你需要在thumb-images div上使用white-space:nowrap。

.frame{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
.image{ 
 
    height: 75%; 
 
    width: 100%; 
 
    
 
    background: red; 
 
} 
 

 
.thumbs{ 
 
    height: 25%; 
 
    width: 100%; 
 
    
 
    background: blue; 
 
} 
 

 
.nav{ 
 
    height: 100%; 
 
    width: 5%; 
 
    display: inline-block; 
 
     
 
    background: green; 
 
} 
 

 
.left{ 
 
    float: left;  
 
} 
 

 
.right{ 
 
    float: right;  
 
} 
 

 
.thumb-images{ 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    width: 90%; 
 
    height: 100%; 
 
    
 
    background: orange; 
 
    white-space:nowrap; /* this */ 
 
} 
 

 
.thumb{ 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    
 
    background: purple; 
 
}

<div class='frame'> 
 
    <div class='image'></div> 
 
    <div class='thumbs'> 
 
     <div class='nav left'></div> 
 
     <div class='thumb-images'> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
     </div> 
 
     <div class='nav right'></div> 
 
    </div> 
 
</div>

來源

2015-10-20 18:40:45

我看到你接受了我的回答，但是@ GrumbleSnatch的更好，因爲我沒有水平滾動條。 –

更改拇指圖片類：

.thumb-images{ 
    display: inline-block; 
    overflow-x: scroll; /* causes extra horizontal content to be scrollable */ 
    overflow-y: hidden; /* causes extra vertical content to be cut off */ 
    white-space: nowrap; /* causes everything to stay on one line and not wrap */ 
    width: 90%; 
    height: 100%; 

    background: orange; 
}

看到它在行動here

來源

2015-10-20 18:40:54 Hypaethral

哦，這是OP想要的，帶有滾動條。整齊。 –

添加text-align: center;到.thumb-images中心的圖像。

添加white-space: nowrap有助於保持一切。爲overflow-x添加不同的行爲和overflow-y產生垂直滾動，見下圖：

.frame { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.image { 
 
    height: 75%; 
 
    width: 100%; 
 
    background: red; 
 
} 
 
.thumbs { 
 
    height: 25%; 
 
    width: 100%; 
 
    background: blue; 
 
} 
 
.nav { 
 
    height: 100%; 
 
    width: 5%; 
 
    display: inline-block; 
 
    background: green; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 
.thumb-images { 
 
    display: inline-block; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
    height: 100%; 
 
    width: 90%; 
 
    background: orange; 
 
    text-align: center; 
 
    
 
} 
 
.thumb { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: purple; 
 
}

<div class='frame'> 
 
    <div class='image'></div> 
 
    <div class='thumbs'> 
 
    <div class='nav left'></div> 
 
    <div class='thumb-images'> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
    </div> 
 
    <div class='nav right'></div> 
 
    </div> 
 
</div>

來源

2015-10-20 18:42:11 ochi

防止div內容包裝

回答

相關問題