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 を追加し、その場所に収まるように互いにプッシュすることを意味します。もう 1 つのことは、このページをレスポンシブにデザインしたいということです。ウィンドウのサイズを変更することを意味します。タイルが移動し、位置が変更され、サイズが変更されます

gridster プラグインを確認しましたが、より多くの機能を得るためにゼロから行う必要があります

これは私の質問です:

float を使用して配置せずに CSS のより良い解決策はありますか? (絶対、相対、および ...)

(将来の JS および上位ステートメントと競合しない)

IE8をサポートすることは私にとって重要です

ご協力ありがとうございます。また、これは私の最初の STACKOVERFLOW の質問です ;)

4

2 に答える 2

1

私は似たようなものを作成しましたが、 float のみを使用<div>してこれらのブロックを作成しました。私の例を参照してください。これはブラウザ間で機能し、これが役立つことを願っています.

編集: 例は、異なるサイズのブロックが使用されたときのレイアウトを示すように更新されています。それでも、この例では<div>ターゲットとして 1 つのタグのみを使用しています。

于 2012-12-24T03:24:22.460 に答える
0

Fluidsquareのようなものをチェックしたくなるかもしれません。

ここにそれに関するブログ記事があります。

于 2012-12-24T03:47:24.753 に答える