一、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. thinkphp5.0.22--日志分析和错误调试

    但凡遇到php页面报错信息,我们可以借助phpgjx工具,一款类似postman的工具 来跟踪导致问题的sql信息,这工具的实质是一款文件夹和文件组合,通过Apache和nginx部署 分析排查这类问 ...

  2. Rust学习-阶段1学习总结

    学习Rust已经两周了,基本上是断断续续的在学,或者是在上下班坐公交时,或者是在ODC没事做时.现在已经学习了Rust程序设计语言的前5章,是时候做一个总结了.关于数据类型或者if else这种内容我 ...

  3. JSONArray排序和倒转

    JSONArray排序 // JSONArray转list List<JSONObject> list = JSONArray.parseArray(ordersDataArray.toJ ...

  4. jquery target属性 语法

    jquery target属性 语法 作用:target 属性规定哪个 DOM 元素触发了该事件.大理石平台精度等级 语法:event.targe 参数: 参数 描述 event     必需.规定需 ...

  5. Java多线程和并发(一),进程与线程的区别

    目录 1.进程和线程的由来 2.进程和线程的定义 3.进程和线程的区别 一.进程和线程的区别 1.进程和线程的由来 2.进程和线程的定义 进程是资源分配的最小单位,线程是CPU调度的最小单位 3.进程 ...

  6. 信息提示框:MessageBox

    一 函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer;   1.参数列表    hW ...

  7. 51 Nod 1020 逆序排列

    1020 逆序排列  基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么 ...

  8. wkhtmltopdfhtml php生成pdf快照,网页截图,网页快照完整版 (原)

    首先,安装(linux安装为例) 1.下载wkhtmltopdf wget http://download.gna.org/wkhtmltopdf/obsolete/linux/wkhtmltopdf ...

  9. Linux下不同组件运行命令

    Spark优化配置 添加外包路径 1.1 vim $SPARK_HOME/conf/spark-defaults.conf spark.executor.extraClassPath file:/// ...

  10. LeetCode117----填充同一层兄弟节点

    给定一个二叉树 struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } 填充它的每个 ...