【Javascript】多个div高度自适应宽度

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0;}
        #box,#boxs{
            margin:0; 
            padding: 0;
            width:  30%;
            color: #fff;
            word-wrap:break-word;
            background-color: #2e4dfe;
            line-height: 25px;
            font-size: 16px;
            overflow: hidden;
            font-family: "微软雅黑";
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="box">最近因也想认识认识，学习学习，接触接触新诗，于是就注册了个中国诗歌网。打开每日好诗榜，心想，这应该是代表着中国诗歌方向和潮流的最好的诗歌作品了。结果不免令人有些失望抑或叫做懊丧，居然连起码的读懂新诗都觉得越来越困难了。因为每日好诗榜里的好多新诗根本就读不懂</div>
    <div id="boxs">最近因也想认识认识，学习学习，接触接触新诗，于是就注册了个中国诗歌网。打开每日好诗榜，心想，这应该是代表着中国诗歌方向和潮流的最好的诗歌作品了。结果不免令人有些失望抑或叫做懊丧，居然连起码的读懂新诗都觉得越来越困难了。因为每日好诗榜里的好多新诗根本就读不懂</div>
    <script>
        var box = document.getElementById("box");
        var boxs = document.getElementById("boxs");
        var objArr = {   //配置
            box : box,
            boxs : boxs
        }
        var example = (function(){
            function autoHeight(obj){
                for(x in obj){
                    obj[x].style.height = obj[x].offsetWidth + 'px';
                }
            }
            function resize(obj){
                window.onresize = function(){
                    autoHeight(obj);
                }
            }
            function autoTitle(obj){
                for(x in obj){
                    obj[x].title = obj[x].innerText || obj[x].textConetnt;
                }
                
            }
            function adaptiveAltitude(obj){
                autoTitle(obj);
                autoHeight(obj);
                resize(obj);
            }
            return {
                adaptiveAltitude : adaptiveAltitude
            }
        })();
        example.adaptiveAltitude(objArr);
    </script>
</body>
</html>
【Javascript】多个div高度自适应宽度

推荐阅读更多精彩内容
