在做移动端页面的时候，经常会碰到一个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实现左侧固定宽度右侧内容可滚动的更多相关文章

  1. HTMLCSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  2. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  3. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  4. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  5. css实现左侧固定宽度，右侧宽度自适应

    #centerDIV { height: 550px; width: 100%; } #mainDIV { height: 100%; border: 1px solid #F00; margin-l ...

  6. 左侧菜单栏右侧内容（改进，有js效果）

    (如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版 这是上一篇文章的改进. 上一篇文章的左侧菜单是没有子目录的. 这是效果图: 左侧菜单代码: <div class=&quo ...

  7. 左侧固定宽度，右侧自适应宽度的CSS布局

    BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修 ...

  8. css实现左侧固定宽，右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  9. 左侧点击后右侧添加tab标签栏以及内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. Django models 常用数据类型

    CharField class CharField(max_length=None[, **options]) # 字符串(存储从小到大各种长度) # 如果是巨大的文本类型,可以用 TextField ...

  2. js------数组随机排序和去重

    let arr = ['g', 'b', 'c', 'd', 'e', 'a', 'g', 'b', 'c']; // 数组随机排序(原数组被修改)Array.prototype.randomSort ...

  3. [转]npm、 cnpm、yarn

    本文转自:https://blog.csdn.net/sinat_34682450/article/details/79473658 终于搞懂了三者之间的关系- 要知道三者之间的关系首先要了解三个包管 ...

  4. 在服务器上搭建wordpress个人博客 php7.2+nginx+mysql+wordperss

    买了台VPS,准备搭建一个博客.用过几个博客框架还是觉得Wordpress好用.主题多,插件也非常的便利,而且大多还免费开源.搭建也很简单,其实安装好php+mysql+nginx+wordpress ...

  5. C# 线程间互相通信 AutoResetEvent和ManualResetEvent

    C#线程间互相通信主要用到两个类:AutoResetEvent和ManualResetEvent. 一.AutoResetEvent AutoResetEvent 允许线程通过发信号互相通信,线程通过 ...

  6. asp.net mvc 碰到 XML 解析错误：找不到根元素 位置

    具体报错信息如下: XML 解析错误:找不到根元素 位置:moz-nullprincipal:{4a1d2b7c-6d07-468e-9df9-2267a0422c93} 行 1,列 1: 网上给出的 ...

  7. ajax 跨域----好用的解决方案

    一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨 ...

  8. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. Linux-kill命令和killall命令(11)

    kill:指定将信号发送给某个进程,常用来杀掉进程,可以通过ps.top命令来查看进程 在默认情况下: 采用编号为的TERM信号.TERM信号将终止所有不能捕获该信号的进程. 对于那些可以捕获该信号的 ...

  10. 【19】中间者模式（Mediator Pattern）

    一.引言 在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信平台,这些都是中介者模式在现实生活中的应用,下面就具体分享下我对中介者模式的理解. 二. 中介者模式的介绍 2.1 ...