一、div 中加滚动条

一、

<div style=" overflow:scroll; width:400px; height:400px;”></div>

记住宽和高一定要设置噢,否则不成的

不过在不超出时,会有下面的滚动条,所以不是最好的选择

二、

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

记住宽和高一定要设置噢,否则不成的

这样比较好的是,在宽和高不超出时,只是一条线

三、说明

直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:

<div style="position:absolute; height:400px; overflow:auto">

</div>

如果要出现水平滚动条,则: overflow-x:auto

同理,垂直滚动条为: overflow-y:auto

如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative

二、超过div宽度 自动换行

一、word-wrap: normal|break-word(word-wrap 属性允许长单词或 URL 地址换行到下一行)。

1、normal ,只在允许的断字点换行(浏览器保持默认处理,默认值)。

2、break-word, 在长单词或 URL 地址内部进行换行。

二、word-break: normal|break-all|keep-all(通过使用 word-break 属性,可以让浏览器实现在任意位置的换行)。

1、normal 使用浏览器默认的换行规则。(默认值)

2、break-all 允许在单词内换行。

3、keep-all 只能在半角空格或连字符处换行。

word-break: break-all;
word-wrap: break-word;

三、div  居中

.xxxx{
width:900px;
height:800px;
margin:0 auto;
}
  1. 必须  明确给出 高宽  【px,,,】
  2. 如果是父元素 的高或宽 以像素的形式 明确给出后,该元素相应的 高或宽 可以用 %

div 加滚动条 超过div宽度 自动换行 div居中的更多相关文章

  1. div 加滚动条

    div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...

  2. div 加滚动条的方法

    div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...

  3. 转: div:给div加滚动条 div的滚动条设置

    div 的滚动条问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”></div&g ...

  4. 前端给div加滚动条样式修改

    <!DOCTYPE html> <html lang="en">       <head>             <meta chars ...

  5. 给div加滚动条

    <div style="width:175px;height:100px;background:white;overflow:scroll;"> <span> ...

  6. div如何加滚动条

    <div style="position:absolute; height:400px; overflow:auto"></div>div 设置滚动条显示: ...

  7. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...

  8. 设置DIV随滚动条滚动而滚动

    有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. div 显示滚动条

    overflow-x:auto    显示横向滚动条 overflow-y:hidden 隐藏纵向滚动条 引用此class,只显示横向的滚动条 .max{ margin:auto; overflow- ...

随机推荐

  1. 欧拉函数 || Calculation 2 || HDU 3501

    题面: 题解:欧拉函数的基础应用,再套个很 easy 的等差数列前 n 项和就成了. 啊,最近在补作业+准备月考+学数论,题就没怎么写,感觉菜得一匹>_< CSL加油加油~! 代码: #i ...

  2. linux下编译安装SDL2和ffmpeg

    首先安装sudo apt-get install libsdl2-dev ./configure --prefix=/tools/SDL2 make && make install $ ...

  3. pikachu-file

    1.不安全的文件下载 1.1.概述 文件下载功能在很多web系统上都会出现,一般我们当点击下载链接,便会向后台发送一个下载请求,一般这个请求会包含一个需要下载的文件名称,后台在收到请求后 会开始执行下 ...

  4. autofs 自动挂载.

    autofs 自动挂载. 操作环境:redhat 6 一.autofs 说明 自动挂载器是一个监视目录的守护进程,并在目标子目录被引用时,自动执行预定义的挂载 自动挂载器由autofs服务脚本管理 自 ...

  5. 原根&离散对数简单总结

    原根&离散对数 1.原根 1.定义: 定义\(Ord_m(a)\)为使得\(a^d\equiv1\;(mod\;m)\)成立的最小的d(其中a和m互质) 由欧拉定理可知: \(Ord\le\P ...

  6. C# WinForm捕获全局异常(捕获未处理的异常)

    static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static vo ...

  7. qt类表

  8. git的安装教程

    团队开发的时候常要用到git来对代码进行管理,平时开发的时候也需要使用git来做一些事情,如给vue项目进行代码编译等等. 那下面我们开始 一.安装和配置环境 首先下载git安装包(去官网下载,htt ...

  9. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

  10. jquery getScript动态加载JS方法改进详解

    有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当 ...