html中，让多个div横向排列且不换行（左右滑动）

固定高度，左右滑动的效果：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title></head><style type="text/css">* {margin: 0;padding: 0;}.outer_div {width: 100%;overflow-x: auto;}.outer_div .box_div {height: 100px;white-space: nowrap;/* 元素之间不会有空隙 */font-size: 0;}.outer_div .box_div div {font-size: 14px;box-sizing: border-box;white-space: normal;word-wrap: break-word;word-break: break-all;overflow: hidden;display: inline-block;width: 25%;height: 100%;background-color: orange;border: 1px solid #000;}</style><body><div class="outer_div"><div class="box_div"><div>box1</div><div>box2</div><div>box3</div><div>box4</div><div>box5</div></div></div></body></html>

固定高度，上下滚动的效果：

-关键点是-去掉这行代码：white-space: nowrap;

html中，让多个div横向排列且不换行（左右滑动）相关推荐

html5中div怎么横着写,html5:div 横向排列的方法
div 横向排列的方法. 以下面这组 div 为例,wrap 的高度由内容撑开 div1 div2 div3 平时是这样的,上下排列~ float 浮动 #div1{ float: left; } # ...
实现让两个DIV横向排列方法揭秘
你对如何定义让两个DIV横向排列的方法是否熟悉,这里和大家分享一下,主要有两种方法,一种是把display换成inline,另一种就是使用float:right属性,相信本文介绍一定会让你有所收获的. ...
多个div横向排列的几种方法
以下面这组 div 为例,group的高度由内容撑开 <div id="group"><div id="div1">div1</d ...
如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
html5:div 横向排列的方法。
div 横向排列的方法. 以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"><div id="div1"&g ...
div横排 html_HTML+CSS-如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
两个div横向排列，顶端对齐的方式。
2019独角兽企业重金招聘Python工程师标准>>> 两个div横向排列,顶端对齐的方式. 博客分类: div css 两个div横向排列,顶端对齐的方式. 1.左右两个div都设 ...
div横向排列+滚动条显示
2017年03月27日 15:04:13 Maximus_ckp 阅读数:11681更多个人分类: CSS 实现多个div在容器内横向排列, 利用white-space这个属性防止父容器内容换行, ...
DIV横向排列的方法：float/inline-block/flex
以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"><div id="div1">div1</di ...

html中，让多个div横向排列且不换行（左右滑动）

固定高度，左右滑动的效果：

固定高度，上下滚动的效果：

html中，让多个div横向排列且不换行（左右滑动）相关推荐

最新文章

热门文章