[JS]div根据其中内容自适应宽度和高度

 这里以自适应高度为例。先要设定好div的width，不用设置div的height属性。后面只需设置minHeight属性或者干脆minHeight属性也不去设置，再保证div是块级元素或绝对/固定位置的元素，这样div就会根据内容自适应高度了。除非有特殊需求否则还是建议自适应高度需要设置minHeight和maxHeight，因为无限制的自适应总会让人担心到时拿到的数据是否合乎规范。

minWidth 属性设置或返回元素的最小宽度，属性只在块级元素或绝对/固定位置的元素发挥作用。
        length     使用 px、cm 等单位定义最小宽度。默认是 0。
        %     定义最小宽度为父元素的百分比。
        inherit     minWidth 属性的值从父元素继承。

maxWidth 属性设置或返回元素的最大宽度，属性只在块级元素或绝对/固定位置的元素发挥作用。
        none     默认。元素的宽度没有限制。
        length     使用 px、cm 等单位定义最大宽度。
        %     定义最大宽度为父元素的百分比。
        inherit     maxWidth 属性的值从父元素继承。

minHeight 属性设置或返回元素的最小高度，属性只在块级元素或绝对/固定位置的元素发挥作用。

maxHeight 属性设置或返回元素的最大高度，属性只在块级元素或绝对/固定位置的元素发挥作用。

简单列表自适应的例子
示意图

例

// 数据
var dataArr = new Array();
for (var i = 0 ; i < 100 ; i ++) {
    var tempDict = {
        "area":"第一工区",
        "ym":"2020/12",
        "time":"2020-12-05",
        "title":"工作计划"+String(i),
        "plan":"目标产值：30万",
        "person":"张三"+String(i)
    };
    if (i == 1 || i == 3) {
        tempDict = {
            "area":"第一工区",
            "ym":"2020/12",
            "time":"2020-12-05",
            "title":"工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作工作计划工作计划工作计划工作计划工作计划工作"+String(i),
            "plan":"目标产值：30万",
            "person":"张三"+String(i)
        };
    }
    dataArr.push(tempDict);
}

// 列表
for (var i = 0 ; i < dataArr.length ; i ++) {
    var tempDict = dataArr[i];
    var listDiv = document.createElement("div");
    listDiv.style.backgroundColor = "white";
    listDiv.style.width = "100%";
    listDiv.style.minHeight = "70px";
    listDiv.style.maxHeight = "200px";
    listDiv.style.marginTop = "10px";
    listDiv.style.zIndex = "0";
    listDiv.style.overflow = "hidden";
    baseDiv.appendChild(listDiv);

    // 工区
    var tempArea = document.createElement("div");
    tempArea.style.width = "64px";
    tempArea.style.height = "64px";
    tempArea.style.border = "1px solid red";
    tempArea.style.borderRadius = "32px";
    tempArea.style.marginLeft = "10px";
    tempArea.style.marginTop = "10px";
    tempArea.style.float = "left";
    listDiv.appendChild(tempArea);

    var tempAreaName = document.createElement("p");
    tempAreaName.innerText = tempDict["area"];
    tempAreaName.style.display = "inline";
    tempAreaName.style.fontSize = "13px";
    tempAreaName.style.fontWeight = "bold";
    tempAreaName.style.position = "relative";
    tempAreaName.style.top = "8px";
    tempAreaName.style.left = "5px";
    tempArea.appendChild(tempAreaName);

    var tempAreaTime = document.createElement("p");
    tempAreaTime.innerText = tempDict["ym"];
    tempAreaTime.style.display = "inline";
    tempAreaTime.style.fontSize = "13px";
    tempAreaTime.style.color = "gray";
    tempAreaTime.style.position = "relative";
    tempAreaTime.style.bottom = "-5px";
    tempAreaTime.style.left = "5px";
    tempArea.appendChild(tempAreaTime);

    // 内容父视图
    var tempListContentView = document.createElement("div");
    tempListContentView.style.height = "100%";
    tempListContentView.style.display = "table";
    tempListContentView.style.listStyle = "none";
    tempListContentView.style.paddingTop = "10px";
    listDiv.appendChild(tempListContentView);

    // 标题
    var tempContentTitle = document.createElement("div");
    tempContentTitle.innerText = tempDict["title"];
    tempContentTitle.style.fontSize = "15px";
    tempContentTitle.style.display = "list-item";
    tempContentTitle.style.position = "relative";
    tempContentTitle.style.left = "10px";
    if (i == 1) {
        tempContentTitle.style.height = "20px";
        tempContentTitle.style.overflow = "hidden";
    }
    tempListContentView.appendChild(tempContentTitle);

    // 负责人
    var tempPerson = document.createElement("div");
    tempPerson.innerText = "工区负责人："+tempDict["person"];
    tempPerson.style.fontSize = "13px";
    tempPerson.style.position = "relative";
    tempPerson.style.left = "10px";
    tempListContentView.appendChild(tempPerson);

    // 目标产值
    var tempMBValue = document.createElement("div");
    tempMBValue.innerText = tempDict["plan"];
    tempMBValue.style.fontSize = "13px";
    tempMBValue.style.position = "relative";
    tempMBValue.style.left = "10px";
    tempListContentView.appendChild(tempMBValue);

    // 时间
    var tempTimeLab = document.createElement("div");
    tempTimeLab.innerText = tempDict["time"];
    tempTimeLab.style.fontSize = "13px";
    tempTimeLab.style.position = "relative";
    tempTimeLab.style.left = "10px";
    tempTimeLab.style.height = "30px";
    tempListContentView.appendChild(tempTimeLab);

    // 清除浮动
    // var cleanFloat = document.createElement("div");
    // cleanFloat.style.clear = "both";
    // cleanFloat.style.height = "0px";
    // cleanFloat.style.lineHeight = "0px";
    // cleanFloat.style.fontSize = "1px";
    // listDiv.appendChild(cleanFloat);
}