0

このリンクの下で指定されているように、誰かが複雑なタイルレイアウトをおかしくするのを手伝ってくれませんか?

ウィジェットに float:left を使用しようとしましたが、赤いブロックが常に #2 の下に表示されます。黒いダッシュボードにウィジェットを動的に追加できるはずです。html5、css3、jquery を使用できます。

2列だけではありません。ダッシュボードに 3 番目、4 番目などの幅に空きスペースがある場合は、そこにあるはずです。サイズの異なるウィジェットが 1 つから無限に存在する可能性があります。自由な幅のスペースがない場合、新しいウィジェットは左にフロートし、自由なスペースを完全に埋める必要があります。

マークアップの失敗:

<!DOCTYPE html>
<html>
  <head>
    <title>Dashboard</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Robots" content="noindex, nofollow"/>
    <style type="text/css">
      #dashboard {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        background: #000;
        width: 320px;
        float: left;
      }
      div.widget {
        margin: 10px;
        border: 1px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        padding: 5px 10px 10px 10px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="dashboard">
      <div class="widget" style="background: #fff; width: 120px; height: 150px">
        <h3>#1</h3>
      </div>
      <div class="widget" style="background: #fff; width: 120px; height: 250px">
        <h3>#2</h3>
      </div>
      <div class="widget" style="background: red; width: 90px; height: 50px">
        <h3>#3</h3>
      </div>
      <div class="widget" style="background: green; width: 90px; height: 50px">
        <h3>#4</h3>
      </div>
      <div class="widget" style="background: blue; width: 90px; height: 50px">
        <h3>#5</h3>
      </div>
    </div>
  </body>
</body>

追加のモックアップ: img191.imageshack.us/img191/2139/picture2fdi.png

4

6 に答える 6

2

2 つのコンテナ div を作成し、両方とも float:left

次に、それらの div 内のすべてを float:left します。

css で 2 列のレイアウトを行う最も簡単な方法。

<div id="leftcol">
your code...
</div>
<div id="rightcol">
your code...
</div>

CSS:

leftcol,rightcol{float:left;width:(whatever);}
于 2009-08-25T06:10:17.237 に答える
2

私はこれがおそらく手遅れであることを知っています。しかし、私は最近、この問題を非常に洗練された方法で解決しているように見えるこの JQuery プラグインを見つけました。

isotope.metafizzy.co

これが役立つことを願っています。

于 2011-05-04T11:24:45.717 に答える
2

CSS:

body {
  background: #000;
}
.left {
    float: left;
}
.right {
    float: left;
}
.widget {
    margin: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 200px;
}
.content {
    margin: 10px;
    background: #fff;
    width: 300px;
}
#one {
    height: 300px;
}
#two {
    height: 400px;
}
#red {
    background: #f00;
    height: 100px;
}
#green {
    background: #0f0;
    height: 100px;
}
#blue {
    background: #00f;
    height: 100px;
}

HTML:

<div class="left">
    <div class="content" id="one"></div>
    <div class="widget" id="red"></div>
    <div class="widget" id="green"></div>
</div>

<div class="right">
    <div class="content" id="two"></div>
    <div class="widget" id="blue"></div>
</div>
于 2009-08-25T06:35:03.913 に答える
0

BlueprintCSSの使用はどうですか？http://www.blueprintcss.org/

于 2009-08-25T07:21:57.233 に答える
0

ラッパーdivを含めて、「ウィジェット」のようなものとして分類し、左にフロートさせてみましたか？＃1と＃2の下にある色付きのボックスが何であるかはわかりませんが、それらがその真上のアイテムに関連している場合、これがどのように難しいかわかりません。

<div class="widget">
    <div id="widget1">stuff</div>
    <div id="widget1_1">stuff related to 1</div>
</div>

<div class="widget">
    <div id="widget2">stuff</div>
    <div id="widget2_1">stuff related to 2</div>
</div>

CSS：

.widget {float: left; overflow: auto;}
.widget div {float: left;}
于 2009-08-25T07:23:10.210 に答える
0

あなたが望むもののためのCSSソリューションはありません。JS ソリューションがあちこちに出回っているのを見たことがあると思いますが、現時点では特定できません。

于 2009-08-26T09:17:08.220 に答える