3

我正在使用此代码建立一个网站

<!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>

​</p>

我使用浮动在页面中放置图块

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

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

我检查了gridster 插件，但需要从头开始才能获得更多功能

这是我的问题：

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

（不与以后的JS和上面的语句冲突）

支持IE8对我来说很重要

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

4

2 回答 2

1

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

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

于 2012-12-24T03:24:22.460 回答
0

你可能想看看像流体广场这样的东西，因为我认为这就是你想要的效果？

这是一篇关于它的博客文章。

于 2012-12-24T03:47:24.753 回答