HTML和CSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候，经常会碰到一个div中分左右两个div，左侧div固定宽度或百分比，右侧div中内容左右溢出，需要左右滑动才可以浏览到全部内容，为此写了一个demo。
处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比，然后设置它的overflow为auto或者scroll。最重要的是，需要左右滚动的内容需要设置属性white-space: nowrap（规定段落中的文本不进行换行）。一般移动端左右滑动不需要显示滚动条，此时可以设置.element::-webkit-scrollbar {display:none}
Demo：
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>模板</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div class="normal-div first">
</div>
<div class="normal-div second">
</div>
<div class="normal-div third">
<div class="left"></div>
<div class="right">
<ul>
<li>额风格的规划法大好人和交通局对符合人体会让对方回复都很反感发帖蝴蝶夫人诞生于红烧肉</li>
<li>额风格的规划法大好人和交通局对符合人体会让对方回复都很反感发帖蝴蝶夫人诞生于红烧肉</li>
<li>额风格的规划法大好人和交通局对符合人体会让对方回复都很反感发帖蝴蝶夫人诞生于红烧肉</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS:
.normal-div{
height:300px;
width:100%;
background:red;
}
.second{
background:blue;
}
.third{
position:relative;
background:grey;
font-size:18px;
}
.left{
display:inline-block;
position:absolute;
top:0;
left:0;
background:green;
width:25%;
height:300px;
}
.right{
display:inline-block;
margin-left: 25%;
width:75%;
height:300px;
background:yellow;
white-space:nowrap;
overflow-x:auto;
}
.right li{
display:inline-block;
}
.right::-webkit-scrollbar{
display:none;
}
HTML和CSS实现左侧固定宽度右侧内容可滚动的更多相关文章
- HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
- css左侧固定宽度右侧自适应
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- css实现左侧固定宽度，右侧宽度自适应
#centerDIV { height: 550px; width: 100%; } #mainDIV { height: 100%; border: 1px solid #F00; margin-l ...
- 左侧菜单栏右侧内容（改进，有js效果）
(如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版 这是上一篇文章的改进. 上一篇文章的左侧菜单是没有子目录的. 这是效果图: 左侧菜单代码: <div class=&quo ...
- 左侧固定宽度，右侧自适应宽度的CSS布局
BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修 ...
- css实现左侧固定宽，右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- 左侧点击后右侧添加tab标签栏以及内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- Java基础之循环语句、条件语句、switch case 语句
Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...
- springboot aop 自定义注解方式实现完善日志记录（完整源码）
版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 一:功能简介 本文主要记录如何使用aop切面的方式来实现日志记录功能. 主要记录的信息有: 操作人,方法名,参数,运行时间,操作类型 ...
- 动态规划法（三）子集和问题(Subset sum problem)
继续讲故事~~ 上次讲到我们的主人公丁丁,用神奇的动态规划法解决了杂货店老板的两个找零钱问题,得到了老板的肯定.之后,他就决心去大城市闯荡了,看一看外面更大的世界. 这天,丁丁刚回到家,他 ...
- PowerDesigner连接SqlServer数据库导出表结构
环境:PowerDesigner15 数据库sql server 2005 第一步.打开PowerDesigner ,建立一个物理数据模型,具体如下图: 第二步.新建成功之后,点击"Data ...
- C#常用单元测试框架比较：XUnit、NUnit和Visual Studio（MSTest）
做过单元测试的同学大概都知道以上几种测试框架,但我一直很好奇它们到底有什么不同,然后搜到了一篇不错的文章清楚地解释了这几种框架的最大不同之处. 地址在这里:http://www.tuicool.com ...
- java_有秒计时的数字时钟
题目内容: 这一周的编程题是需要你在课程所给的时钟程序的基础上修改而成.但是我们并不直接给你时钟程序的代码,请根据视频自己输入时钟程序的Display和Clock类的代码,然后来做这个题目. 我们需要 ...
- Linux下编译、链接和装载
——<程序员的自我修养>读书笔记 编译过程 在Linux下使用GCC将源码编译成可执行文件的过程可以分解为4个步骤,分别是预处理(Prepressing).编译(Compilation). ...
- React 入门学习笔记整理（一）——搭建环境
使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...
- Javascript异步编程之二回调函数
上一节讲异步原理的时候基本上把回掉函数也捎带讲了一些,这节主要举几个例子来具体化一下.在开始之前,首先要明白一件事,在javascript里函数可以作为参数进行传递,这里涉及到高阶函数的概念,大家可以 ...
- ArcGIS Server Rest 认证过程分析
1. http://192.168.1.220:6080/arcgis/admin/login?redirect= Request URL: http://192.168.1.220:6080/arc ...