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>
80 0
|
2月前
|
前端开发 容器
怎么让一个 div 水平垂直居中
要使一个 `div` 元素在页面上水平垂直居中,可以采用 CSS 的 Flexbox 或 Grid 布局方法。使用 Flexbox 时,可在父元素上设置 `display: flex; justify-content: center; align-items: center;`,而子 `div` 将会自动在中心显示。另一种方法是使用 Grid 布局,设置父元素 `display: grid; place-items: center;` 也能达到相同的效果。
|
7月前
|
前端开发
layui-form
`layui-form`是一个前端表单组件,提供多种表单类型如单行、多行排列的输入框,下拉选择框(支持模糊搜索),单选框和复选框。表单元素可通过`required`和`lay-verify`属性进行必填和验证设置。编辑器如`layedit`可用于富文本输入,表单监听事件如提交和单选器可绑定回调函数进行处理。此外,能动态更新渲染表单,初始化表单数据并进行数据校验,包括自定义验证规则。
85 1
|
前端开发 JavaScript 开发者
layui01
layui01
56 0
|
机器学习/深度学习 人工智能
B2. Wonderful Coloring - 2<734.div3>
B2. Wonderful Coloring - 2<734.div3>
63 1
|
开发框架 前端开发 JavaScript
LayUI的使用
LayUI的使用
105 0
|
移动开发 前端开发 JavaScript
Mikasa #735-div2
题意:找到n ^ 1 … n ^ m中最小为出现的非负整数
102 0
Mikasa #735-div2
|
Web App开发 容器
Div并排显示
Div并排显示
|
开发框架 JavaScript 前端开发
再见!LayUI !
再见!LayUI !
373 0
再见!LayUI !

热门文章

最新文章