Question

我正在使用this code

构建网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #dcf0f9;
            direction : rtl;
        }

        .clearfix:before, .clearfix:after {
            content: "";
            display: table;

        }

        .clearfix:after {
            clear: both;
        }

        .tile_1_1 {
            width: 120px;
            height: 120px;
        }

        .tile_2_1 {
            width: 248px;
            height: 120px;
        }

        .tile_2_2 {
            width: 248px;
            height: 248px;
        }

        .tile_1_2 {
            width: 120px;
            height: 248px;
        }

        .tile_4_3 {
            width: 504px;
            height: 376px;
        }

        .tile {
            float: right;
            margin: 4px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .bottom {
            margin-bottom: 0;
        }

        .bottom_left {
            margin: 4px 4px 0 0;
        }

        .bottom_right {
            margin: 4px 0 0 4px;
        }

        .bottom_left_right {
            margin: 4px 0 0 0;
        }

        .top {
            margin-top: 0;
        }

        .top_left {
            margin: 0 4px 4px 0;
        }

        .top_right {
            margin: 0 0 4px 4px;
        }

        .top_left_right {
            margin: 0 0 4px 0;
        }

        .left {
            margin-left: 0;
        }

        .right {
            margin-right: 0;
        }

        .left_right {
            margin: 4px 0 4px 0;
        }

        .column_4 {
            width: 504px;
            float: right;
        }

        .column_2 {
            width: 248px;
            float: right;
        }

        .column_left {
            margin: 0 4px 0 0;
        }

        .column_midde {
            margin: 0 4px 0 4px;
        }

        .column_right {
            margin: 0 0 0 4px;
        }

        .backToOrigin {
            margin-top: -120px;
        }

        #container {
            margin-top: 150px;
            width: 3000px;
        }

        #sectionA {
            float: right;
            width: 1016px;
        }

        #sectionB {
            float: right;
            width: 504px;
            margin-right: 112px;
        }

        #slideShow {
            background-color: #aaa;
        }

        .typeB {
            background-color: #21b044;
        }

        .typeA {
            background-color: #1f65c5;
        }

        .typeC {
            background-color: #21b1e5;
        }

        .redBox {
            background-color: #fd3f1b;
        }

        .yellowBox {
            background-color: #fdbe21;
        }

        .greyBox {
            background-color: #5a5a5a;
        }

        .greenBox {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="container" class="clearfix">
        <section id="sectionA">
            <div class="column_4 column_right">
                <div id="slideShow" class="tile_4_3 tile top_left_right"></div>
                <div class="tile_2_1 tile tile bottom_right typeA"></div>
                <div class="tile_1_1 tile bottom typeB"></div>
                <div class="tile_1_1 tile bottom_left typeA"></div>
            </div>
            <div class="column_2 column_midde">
                <div class="tile_2_1 tile top_left_right typeB"></div>
                <div class="tile_1_1 tile right typeA"></div>
                <div class="tile_1_1 tile left yellowBox"></div>
                <div class="tile_1_1 tile right typeB"></div>
                <div class="tile_1_2 tile bottom_left typeA"></div>
                <div class="tile_1_1 tile bottom_right redBox backToOrigin"></div>
            </div>
            <div class="column_2 column_left">
                <div class="tile_1_1 tile top_right typeA"></div>
                <div class="tile_1_1 tile top_left typeC"></div>
                <div class="tile_2_1 tile left_right greyBox"></div>
                <div class="tile_2_2 tile bottom_left_right typeC"></div>
            </div>
        </section>
        <section id="sectionB">
            <div class="column_2 column_right">
                <div class="tile_2_1 tile top_right typeA"></div>
                <div class="tile_1_1 tile right typeC"></div>
                <div class="tile_1_1 tile left typeA"></div>
                <div class="tile_2_2 tile bottom_left_right greenBox"></div>
            </div>
            <div class="column_2 column_left">
                <div class="tile_1_1 tile top_right greenBox"></div>
                <div class="tile_1_1 tile top_left yellowBox"></div>
                <div class="tile_2_1 tile left_right typeC"></div>
                <div class="tile_1_2 tile bottom_right typeA"></div>
                <div class="tile_1_1 tile left typeB"></div>
                <div class="tile_1_1 tile bottom_left greyBox"></div>
            </div>
        </section>
    </div>
</body>

我使用float在页面中放置了瓷砖

我知道这不是这种设计的最佳方法

我希望这些瓷砖在未来是动态的，我的意思是我会添加JS来拖动和删除并移动这些瓷砖并相互推动以适应这个地方，另一件事是我想设计这个页面响应，我的意思是调整大小窗口这些瓷砖移动并改变他们的位置和调整大小

我检查了gridster plugin但需要从头开始以获得更多功能

这是我的问题：

是否有更好的CSS解决方案，而不是使用浮动和没有定位？（绝对，相对和......）

（与未来的JS和上层陈述没有冲突）

对我来说，支持IE8非常重要

感谢您的帮助，这也是我的第一个STACKOVERFLOW问题;）

Answer 1

我创建了类似的东西，我只使用float <div>来制作这些块。见my example。它适用于各种浏览器，我希望这可以帮助你。

编辑：更新示例以显示使用不同大小的块时的布局。尽管如此，该示例仅使用1个<div>标记作为目标。

Answer 2

您可能需要查看fluidsquares之类的内容，因为我认为这是您想要的效果？

Here是关于它的博文。

用于设计Metro风格网站的CSS和JS技术

2 个答案: