Html 防止将div内容包装

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

.frame{
高度：200px；
宽度：200px；
}
.形象{
身高：75%；
宽度：100%；
背景：红色；
}
.拇指{
身高：25%；
宽度：100%；
背景：蓝色；
}
.导航{
身高：100%；
宽度：5%；
显示：内联块；
背景：绿色；
}
.左{
浮动：左；
}
.对{
浮动：对；
}
.拇指图像{
显示：内联块；
溢出：隐藏；
宽度：90%；
身高：100%；
背景：橙色；
}
.拇指{
显示：内联块；
宽度：50px；
高度：50px；
背景：紫色；
}

我不确定（您的问题不太清楚），但我认为答案可能是您需要在thumb images div上使用

空白：nowrap

.frame{
高度：200px；
宽度：200px；
}
.形象{
身高：75%；
宽度：100%；
背景：红色；
}
.拇指{
身高：25%；
宽度：100%；
背景：蓝色；
}
.导航{
身高：100%；
宽度：5%；
显示：内联块；
背景：绿色；
}
.左{
浮动：左；
}
.对{
浮动：对；
}
.拇指图像{
显示：内联块；
溢出：隐藏；
宽度：90%；
身高：100%；
背景：橙色；
空白：nowrap；/*此*/
}
.拇指{
显示：内联块；
宽度：50px；
高度：50px；
背景：紫色；
}

---

更改thumb images类：

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

---

在操作中查看它

添加

文本对齐：居中至
。拇指图像
使图像居中

添加
空白：nowrap
有助于将所有内容保持在一行中。
为
overflow-x
和
overflow-y
添加不同的行为会产生垂直滚动，如下所示：


.frame{
高度：200px；
宽度：200px；
}
.形象{
身高：75%；
宽度：100%；
背景：红色；
}
.拇指{
身高：25%；
宽度：100%；
背景：蓝色；
}
.导航{
身高：100%；
宽度：5%；
显示：内联块；
背景：绿色；
}
.左{
浮动：左；
}
.对{
浮动：对；
}
.拇指图像{
显示：内联块；
溢出-x：滚动；
溢出y：隐藏；
空白：nowrap；
身高：100%；
宽度：90%；
背景：橙色；
文本对齐：居中；
}
.拇指{
显示：内联块；
宽度：50px；
高度：50px；
背景：紫色；
}

我不确定你问的问题是什么。你的图像是25%，背景是90%（90-（25x3）=15）。你想用剩下的15%做什么？把它藏起来？把它展示给两边？哦，那是OP想要的，有一个滚动条。很好。我看你接受了我的答案，但是@GrumbleSwatch's更好，因为我的没有水平滚动条。