防止div内容换行

Question

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

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

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

Answer 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

中查看

Answer 2

我不确定（你的问题不太清楚），但我认为答案可能是你需要在拇指图像div上white-space:nowrap。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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