CSS3-用不同大小的可变数量的矩形填充网页的最短方法

CSS3 - shortest way fill a webpage with a variable number of rectangles of different sizes

本文关键字：填充 网页 方法 CSS3-      更新时间：2023-09-26

我想制作一个html5模板，其中页面用矩形填充。

如果只有一个矩形，它将占据整个屏幕。然后，其他矩形将从底部升起，吃掉第一个矩形的位置。每个矩形都必须是一个html元素，因为我会在上面加上背景大小：封面（所以使用剩余的容器空间来组成第一个矩形不是一个可行的解决方案）。有两种布局，一种有两列，另一种有三列。

可以获得确切的行为 此处：JS BIN

它运行得很好，但我认为有更短更好的方法可以做到这一点。

周围有CSS专家吗？JS解决方案也可以，但前提是它更短。LESScss也可以使用。

也许是列数？

Masony是一个有趣的框架，可以帮助您处理您的情况。。。或者可能将你的想法提升到一个新的水平。

看看这个网站，看看它是否能帮助你的努力：http://masonry.desandro.com/

这样？

这只解决你的"肖像"部分

HTML

<div class="container"></div>

CSS

.container {
    width:100%;
}
.box {
    background-color:red;
    display:inline-block;
    height: 25%;
    width: 50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:1px solid blue;
    text-align:center;
}
.fullWidth {
    width:100%;
}

JS

$(document).ready(function () {
    var maxNum = 12;
    var startNum = 1;
    function render() {
        if (startNum % 2 === 0) {
            $(".container").children(".box:nth-of-type(odd)").removeClass("fullWidth");
            $(".container").append("<div class='box'>" + startNum + "</div>");
        } else {
            $(".container").append("<div class='box fullWidth'>" + startNum + " </div>");
        }
        if (startNum < maxNum) {
            setTimeout(render, 1500);
        }
        startNum++;
    }
    render();
});

编辑添加了"横向"部分

像这样？

这只解决您的"横向"部分

HTML

<div class="container"></div>

CSS

.container {
    width:100%;
}
.box {
    background-color:red;
    display:inline-block;
    height: 25%;
    width: 33.333%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:1px solid blue;
    text-align:center;
}
.halfWidth {
    width:50%;
}
.fullWidth {
    width:100%;
}

JS

$(document).ready(function () {
    var maxNum = 12;
    var startNum = 1;
    function render() {
        if (startNum % 3 === 0) {
            $(".container").children(".box").removeClass("halfWidth");
            $(".container").append("<div class='box'>" + startNum + "</div>");
        } else if ((startNum - 2) % 3 === 0) {
            $(".container").children(".box:nth-of-type(" + (startNum - 1) + ")").removeClass("fullWidth").addClass("halfWidth");
            $(".container").append("<div class='box halfWidth'>" + startNum + "</div>");
        } else {
            $(".container").append("<div class='box fullWidth'>" + startNum + " </div>");
        }
        if (startNum < maxNum) {
            setTimeout(render, 1500);
        }
        startNum++;
    }
    render();
});
相关文章：