div常用

简介: div常用

加滚动条的方法(宽和高一定要设置)

- 滚动条:overflow:yes
- 滚动条自适应:overflow:auto
- 垂直滚动条:overflow-y:yes
- 垂直滚动条自适应:overflow-y:auto
- 取消滚动条:overflow:scroll;
- 如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative
<div style="position:absolute; height:400px; overflow:auto"></div>

div 横向排列

DIV布局网页元素的方式主要有三种:平铺(并排)、嵌套、覆盖(遮挡)

方法一:对div标签设置div{ display:inline}样式

<div style="display:flex">
    <div style="display:inline">第一个盒子</div>
    <div style="display:inline">第二个盒子</div>
    <div style="display:inline">第三个盒子</div>
</div>

方法二:float:left

<div class="lay1"></div>
<div class="lay2"></div>
<div class="lay3"></div>
.lay1{ width:100px; height:20px; border:1px solid #FF6699; float:left}
.lay2{ width:100px; height:20px; border:1px solid #FF6699; float:left}
.lay3{ width:100px; height:20px; border:1px solid #FF6699; float:left}

div 动态添加内容

// JS把内容动态插入到DIV
window.onload = function() {
  var testdiv = document.getElementById("testdiv");
  testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
}
window.onload = function() {
  var para = document.createElement("p");
  var txt1 = document.createTextNode("I inserted ");
  para.appendChild(txt1);
  var testdiv = document.getElementById("testdiv");
  testdiv.appendChild(para);
}
// 给ccc追加 input
$("<input type='text' name='ddd' id='ddd' value='Hello, Nowamagic' ><br>").appendTo("#ccc");
//nowamagic追加 input
$("#nowamagic").append("<input type='text' name='ddd' id='ddd' value='Hello, Nowamagic' ><br>");
/*
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
*/


相关文章
|
机器学习/深度学习 人工智能 BI
B. Swaps<743,div2>
B. Swaps<743,div2>
75 0
|
1月前
|
前端开发 容器
怎么让一个 div 水平垂直居中
要使一个 `div` 元素在页面上水平垂直居中,可以采用 CSS 的 Flexbox 或 Grid 布局方法。使用 Flexbox 时,可在父元素上设置 `display: flex; justify-content: center; align-items: center;`,而子 `div` 将会自动在中心显示。另一种方法是使用 Grid 布局,设置父元素 `display: grid; place-items: center;` 也能达到相同的效果。
|
机器学习/深度学习 人工智能
B2. Wonderful Coloring - 2<734.div3>
B2. Wonderful Coloring - 2<734.div3>
59 1
|
前端开发
div文字居中
div文字居中
|
移动开发 前端开发 JavaScript
|
前端开发 开发者 容器
DIV 和 SPAN 标签介绍| 学习笔记
快速学习 DIV 和 SPAN 标签介绍。
DIV 和 SPAN 标签介绍| 学习笔记
|
前端开发
将div铺满body三种方式
将div铺满body三种方式
313 0
Mikasa #735-div2
题意:找到n ^ 1 … n ^ m中最小为出现的非负整数
97 0
Mikasa #735-div2
|
Web App开发 容器
Div并排显示
Div并排显示
|
前端开发
Div与Span标签详解
Div与Span标签详解
316 0