防止 div 内容换行答案

【问题标题】：Prevent div content to wrap防止 div 内容换行
【发布时间】：2015-10-21 02:54:22
【问题描述】：

我需要开发简单的图像框控件，主大图像和缩略图区域位于底部。这是我的代码

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

我需要拇指图像内容区域（橙色）来隐藏其溢出（紫色矩形代表图像）。我还需要水平滚动。我的标记有什么问题？

【问题讨论】：

我不知道你问的是什么问题。
您的图片占 25%，背景占 90% (90-(25x3)=15) 您想用剩余的 15% 做什么？把它藏起来？向两边展示？

标签： html css

【解决方案1】：

更改缩略图类：

.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

【讨论】：

哦，这就是 OP 想要的，带有滚动条。整洁。

【解决方案2】：

我不确定（您的问题不太清楚），但我认为答案可能是您需要在 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>

【讨论】：

我看到你接受了我的回答，但@GrumbleSnatch 的更好，因为我的没有水平滚动条。

【解决方案3】：

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

【讨论】：