5

このルールで、いくつかの div を配置しようとしています: 可能な場合は最初の列を埋め、次に (最初の列がいっぱいになったら) 2 番目の列を埋めます (下の画像を参照してください)。

これが私が欲しいものです: (ペイントで作成!)

ゴール

上の画像では、ご覧のとおり、最初の列に 1、2、3、4 があり、最初の列に 5 を配置するのに十分な垂直方向のスペースがありません。したがって、5 は 2 列目に配置する必要があります...

を使用して上の画像のようなものを作成しようとしましたfloat:leftが、これが結果です。

現在のコード

最初の画像のようなものを作成するにはどうすればよいですか? 現在のコード (2 番目のイメージを作成するコード) の何が問題になっていますか?

これは私のHTMLコードです:

<div class="container">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
<div class="i2">5</div>
<div class="i3">6</div>
<div class="i1">7</div>
<div class="i1">8</div>
</div>

そして、これは私の CSS です:

.container {
    overflow:scroll;
    width:10000px;
    height:200px;
    background:skyblue;    
    position:absolute;
}
.i1,.i2,.i3 {
    float:left;    
    width:100px;
    background:lime;
    border-radius: 20px;
    text-align:center;
}
.i1 {
    height:33px;
}
.i2 {
    height:66px;   
}
.i3 {
    height:100px;   
}

私のコードのフィドル

4

3 に答える 3

7

最新のタブレットとスマートフォンだけが正しく表示されるはずです

その場合は、CSS3 列を使用してください。ブラウザのサポートは十分なはずです。

http://jsfiddle.net/thirtydot/AQ7bp/4/

.container {
    -webkit-column-width: 100px;
    -moz-column-width: 100px;
    column-width: 100px;

    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
}
.i1,.i2,.i3 {
    display: inline-block;
    vertical-align: top;
}
于 2012-11-22T09:46:09.763 に答える
3

列を追加の div に分ける必要があります。Float left は要素を水平方向に揃えるため、文中の単語のように動作します。div の各セクションをラップし、ラッパーを左にフローティングすると、必要な効果が得られますが、この特定の場合のみです。これをより動的にする場合は、設計を再考する必要があるかもしれません。

HTML:

<div class="container">
    <div class="wrap">
        <div class="i1">1</div>
        <div class="i1">2</div>
        <div class="i1">3</div>
        <div class="i1">4</div>
    </div>
    <div class="wrap">
        <div class="i2">5</div>
        <div class="i3">6</div>
    </div>
    <div class="wrap">
        <div class="i1">7</div>
        <div class="i1">8</div>
    </div>
</div>​

CSS:

.container {
    overflow:scroll;
    width:10000px;
    height:200px;
    background:skyblue;    
    position:absolute;
}

.wrap
{
    float: left;
    width: 102px;
}

.i1,.i2,.i3 {   
    width:100px;
    background: #000;
    border-radius: 20px;
    text-align:center;
    color: #fff;
}
.i1 {
    height:33px;
}
.i2 {
    height:66px;   
}
.i3 {
    height:100px;   
}​

http://jsfiddle.net/Kyle_Sevenoaks/PyT5w/ (目が痛いので色変えました。)

質問に関するいくつかの明確化の後、これが高さのシフトで動的に入力される場合、クレイジーなJavascriptを使用しないソリューションはありません。別のデザインを考え出す必要があります。

于 2012-11-22T08:48:11.083 に答える
2

おそらくflexboxで動作させることができます。iOS ブラウザーでのサポートについてはわかりませんが、新しい Webkit ブラウザーではサポートされているので、一見の価値があるかもしれません。

.container {
  overflow:scroll;
  width:10000px;
  height:200px;
  background:skyblue;    
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
}
于 2012-11-22T09:29:28.460 に答える