1.使用table标签的方式实现多个div并排显示。
2.动态创建div,并添加到table中。
3.兼容IE5、IE6、IE7、IE8、IE9、IE10、IE11、Chrome、Opera、Firefox、Microsoft Edge。
4.通过js动态创建table的单元格是,应该使用insertRow和insertCell来处理,不能用appendChild,否则在IE7中不显示。
5.table中单元格默认居中对齐,设置顶端对齐需要给tr标签设置样式“vertical-align:top;”。
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
margin-left: 2em;
margin-right: 2em;
}
.rootDiv
{
margin-top: 4em;
width: 100%;
display:inline-block;
overflow:auto;
}
.myDiv {
margin-top: 2em;
}
.myDiv span {
width: 15em;
display:inline-block;
}
.myDiv li {
min-width: 15em;
list-style-type: disc;
display:inline-block;
}
table {
width: auto;
}
tr {
vertical-align:top;
}
td {
border-top: 1px dashed #ccc;
border-left: 1px dashed #ccc;
width: auto;
line-height: 3em;
}
</style>
<script>
function init() {
var rootDiv = document.getElementById("rootDiv");
var myTable = document.createElement("table");
rootDiv.appendChild(myTable);
var myTr = myTable.insertRow(0);
//如果使用下面两句将在IE7及以下不能显示table
//var myTr = document.createElement("tr");
//myTable.appendChild(myTr);
for (var i=0; i<10; i++) {
//var myTd = myTr.insertCell(i);
var myTd = document.createElement("td");
myTr.appendChild(myTd);
var myDiv = document.createElement("div");
myTd.appendChild(myDiv);
myDiv.setAttribute("class", "myDiv");
myDiv.setAttribute("className", "myDiv");//for IE7
var updateDaySpan = document.createElement("span");
myDiv.appendChild(updateDaySpan);
updateDaySpan.innerHTML = "更新日期: " + "2017-09-27";
var ul = document.createElement("ul");
myDiv.appendChild(ul);
ul.style.marginTop = "0.1em";
for (var j=0; j<i+1; j++) {
var li = document.createElement("li");
ul.appendChild(li);
li.innerHTML = "执子之手,拿去喂狗。";
}
}
}
</script>
</head>
<body οnlοad="init()">
<div class="rootDiv" id="rootDiv">
</div>
</body>
</html>