加滚动条的方法(宽和高一定要设置)
- 滚动条: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() - 在被选元素之前插入内容 */