并排多个div，并可滚动

最新推荐文章于 2023-09-03 18:04:16 发布

我是黄老邪

最新推荐文章于 2023-09-03 18:04:16 发布

阅读量2.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/dezhihuang/article/details/78112990

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>