html - CSS グリッド レイアウト/画像の配置に関する問題

Question

画像が適切に配置されたページをまとめようとして苦労しています。私が現在持っているもののスクリーンショットが添付されています。私が取得しようとしているのは、ページの最初の行 (1-5) のように見え、他のすべての行が反対になっている場合です。画像 1 ～ 8 は正しく設定されていますが、9 ～ 10 は、必要な行 2 ではなく行 3 にあります。画像 11 が左側、12 ～ 15 が右側になります。等々..

現在の CSS –

    #grid { float: left; width: 100%; overflow: hidden; }
#grid-inner { float: left; width: 890px; overflow: hidden;  }
.item { float: left; margin: 0 0 10px 0; position: relative; }
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; }
.item span a { color: #fff; display: block; height: 100%; width: 100%; }
.small { width: 210px; height: 125px; }
.large { width: 420px; height: 260px; }
.small span { width: 210px; height: 125px; padding: 0 0 0 0; }
.large span { width: 420px; height: 260px; padding: 0 0 0 0; }
#project { float: left; width: 100%; }
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; }
#project-content-alpha { float: left; width: 200px; }
#project-content-beta { float: left; width: 410px; }
#project-content-gamma { float: right; width: 200px; text-align: right; }
    #project-content-alpha span.light { color: #999; }
#project-images { float: left; width: 100%; }
#project-images img { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination-alpha { float: left; width: 200px; }
#project-pagination-beta { float: right; width: 200px; text-align: right; }

現在のマークアップ –</p>

    <div id="grid">
<div id="grid-inner">


<div class="item large">
<span><a href="" title="">ONE</a></span>
<a href="" title="ONE"><img src="" width="420" height="260" alt="ONE" /></a>
</div>



<div class="item small">
<span><a href="" title="">TWO</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="TWO" /></a>
</div>



<div class="item small">
<span><a href="" title="">THREE</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="THREE" /></a>
</div>



<div class="item small">
    <span><a href="" title="">FOUR</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="FOUR" /></a>
</div>



<div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="FIVE" /></a>
</div>



    <div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="SIX" /></a>
</div>



<div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="SEVEN" /></a>
</div>



<div class="item large">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="420" height="260" alt="EIGHT" /></a>
</div>

これに関するヘルプや提案をいただければ幸いです。前もって感謝します！

Answer 1

CSSfloatは、要素を垂直方向に再配置しません。それらは水平方向にのみ浮きます。

垂直方向の「フロート」（つまりタイリング）が必要な場合は、JavaScriptを使用する必要があります。jQuery MasonryPluginまたはVanillaMasonry（jQuery MasonryからjQueryを差し引いたもの）をお勧めします。

Answer 2

ここでインターフェイスを確認してください。修正が必要な場合はお知らせください。

まさに求められたもの - http://jsfiddle.net/rxLTG/

HTML

<div class="wrap">
    <div class="row">
        <img class="lg" src="" alt="1" />
        <img class="sm" src="" alt="2" />
        <img class="sm" src="" alt="3" />
        <img class="sm" src="" alt="4" />
        <img class="sm" src="" alt="5" />
    </div>
    <div class="row">
        <img class="sm" src="" alt="6" />
        <img class="sm" src="" alt="7" />
        <img class="lg" src="" alt="8" />
        <img class="sm" src="" alt="9" />
        <img class="sm" src="" alt="10" />
    </div>
</div>

CSS

.wrap {width:650px;}
.wrap img {float:left; width:150px; height:100px;}
.wrap img.lg {width:350px; height:200px;}
.row.odd .lg, .row:nth-child(even) .lg {float:right;}​

JS

$(function () {
    $('.row:odd').addClass('odd');​
});

Answer 3

より良い方法は次のようになります - http://jsfiddle.net/rxLTG/2/

HTML

<div class="wrap">
  <img class="lg" src="" alt="1" />
  <img class="sm" src="" alt="2" />
  <img class="sm" src="" alt="3" />
  <img class="sm" src="" alt="4" />
  <img class="sm" src="" alt="5" />
  <img class="lg2" src="" alt="6" />
  <img class="sm" src="" alt="7" />
  <img class="sm" src="" alt="8" />
  <img class="sm" src="" alt="9" />
  <img class="sm" src="" alt="10" />
  <img class="lg" src="" alt="11" />
  <img class="sm" src="" alt="12" />
  <img class="sm" src="" alt="13" />
  <img class="sm" src="" alt="14" />
  <img class="sm" src="" alt="15" />
  <img class="lg2" src="" alt="16" />
  <img class="sm" src="" alt="17" />
  <img class="sm" src="" alt="18" />
  <img class="sm" src="" alt="19" />
  <img class="sm" src="" alt="20" />
</div>

CSS

.wrap {width:500px;}
.wrap img {float:left; width:125px; height:100px;}
.wrap img.lg {width:250px; height:200px;}
.wrap img.lg2 {width:250px; height:200px;float:right;}​

div 内の各行を定義する必要はありません。それらは自動的に収まって折り返されるからです。

また、最初に各行 (左または右) に大きな画像をフロートさせると、他の 4 つは JavaScript を必要とせずに所定の位置に収まります。

5 つおきの数字が大きな画像になります (1、6、11、16、21 など)。JavaScript を使用せずに動作させたい場合は、このソリューションを使用してください。元の番号付けシステムを維持したい場合は、上記の解決策を使用してください。

Answer 4

グリッドとして見ることができます。マークアップが増えますが、再利用可能でレスポンシブです。たとえば、このグリッド レイアウトは、コンテナの半分を占める単一のクラスで処理できます。

最初の行 : - 1/2 の 1 列: 1 つの大きな画像があります - 1/2 の 1 列: 4 つの列があります (それぞれ 1/2 で、それぞれに小さな画像が含まれます)

2 行目 : 最初の 1/2 列を逆にするだけです

列は浮動しているため、列 4 と 5 は 1 と 2 の下にスタックされます... 画像も正しい縦横比である必要があります。

そして最後に、フローティング エレメントなので、グループを clearfix します。

それが役に立てば幸い。

/* Micro clearfix for the wrapper */
.wrap:before,
.wrap:after { 
    content: '';
    display: table
}
.wrap:after { 
     clear: both;
}
.wrap { width:650px; }
/* no need for size if you put the right images */
img { 
    width:100%;
    height: auto;
    vertical-align: middle; /* removes the gap beneth the image */
}
/* you can go further and create some other columns */
.col-1-2 {  
    float: left;
    width: 50%;
}
/* demo purpose only */
img { 
    width: 100%;
    height: 100px;
}
img.lg { height: 200px; }
   

<div class="wrap">
    <!-- one half of the wrapper -->
    <div class="col-1-2">
        <img class="lg" src="" alt="1" />
    </div>
    <!-- one half of the wrapper -->
    <div class="col-1-2">            
        <!-- one half of the columns :: 1/4 -->
        <div class="col-1-2">            
            <img class="" src="" alt="2" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="3" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="4" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="5" />
        </div>
    </div>

    <!-- then reverse -->
    <div class="col-1-2">
        <div class="col-1-2">            
            <img class="" src="" alt="6" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="7" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="8" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="9" />
        </div>
    </div>            
    <div class="col-1-2">
        <img class="lg" src="" alt="10" />
    </div>      
</div>