div 加滚动条 超过div宽度 自动换行 div居中
一、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;
}
- 必须 明确给出 高宽 【px,,,】
- 如果是父元素 的高或宽 以像素的形式 明确给出后,该元素相应的 高或宽 可以用 %
div 加滚动条 超过div宽度 自动换行 div居中的更多相关文章
- div 加滚动条
div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...
- div 加滚动条的方法
div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...
- 转: div:给div加滚动条 div的滚动条设置
div 的滚动条问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”></div&g ...
- 前端给div加滚动条样式修改
<!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 给div加滚动条
<div style="width:175px;height:100px;background:white;overflow:scroll;"> <span> ...
- div如何加滚动条
<div style="position:absolute; height:400px; overflow:auto"></div>div 设置滚动条显示: ...
- 如何给div加一个边框border样式
如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...
- 设置DIV随滚动条滚动而滚动
有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- div 显示滚动条
overflow-x:auto 显示横向滚动条 overflow-y:hidden 隐藏纵向滚动条 引用此class,只显示横向的滚动条 .max{ margin:auto; overflow- ...
随机推荐
- Vue处理跨域
Vue处理ajax跨域 一般处理跨域有好几种方式,jsonp,document.domain, post Message...,今天我们主要来谈谈vue 通过代理方式来实现跨域 安装 npm inst ...
- selenium相关导入By、Keys、WebDriverWait、ActionChains,显示等待与隐式等待
# -*- coding: utf-8 -*- """ @author: Dell Created on Tue Dec 24 12:33:56 2019 "& ...
- static成员变量
可以创建一个由同一个类的所有对象共享的成员变量.要创建这样的成员,只需将关键字 static 放在变量声明的前面,如下面的类所示: class StatDemo { private: static i ...
- eclipse svn同步过滤掉某些不需要同步的文件
注:这里说的svn是eclipse里svn插件 默认情况下,我们在点击svn同步时,总是会把一些不需要的目录和文件也给同步了,这样我觉得很晃眼睛,所以在这里说下怎么去去掉不想同步的文件 1.默认同步下 ...
- C# 扩展、常用方法
项目基本做完了,抽空整理下里面用到的扩展方法,以及复用度很高的代码,省的以后到处去找. 一.C#扩展方法——Distinct去重 二.C#扩展方法——获得枚举Description 三.C#扩展方法— ...
- react -搭建服务
import 'whatwg-fetch'; import 'es6-promise'; require('es6-promise').polyfill(); import * as common f ...
- docker-compose容器互相连接
一些示例未整理 haproxy 与nginx 容器连接 ## 服务的compose 编写 mkdir /mnt/compose vim docker-compose.yml web1: image: ...
- QTCreator:QSS语法高亮(QSS Syntax highlight)
由于QSS几乎等同CSS[1]语法,所以我们设置有 QT 语法高亮: Qtcreator QSS syntax highlight setting: Qt Creator QSS 语法交互设置:QTC ...
- CSS3 的背景属性
㈠background-size 属性 ⑴background-size 属性规定背景图片的尺寸. ⑵在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的.在 CSS3 中,可以规定背景图片的尺 ...
- BZOJ 3173: [Tjoi2013]最长上升子序列 Splay
一眼切~ 重点是按照 $1$~$n$ 的顺序插入每一个数,这样的话就简单了. #include <cstdio> #include <algorithm> #define N ...