これは結果を見ないと説明が難しいかもしれませんので、以下の例をご覧ください。
JSFiddle の例 1 - 問題ないように見える
JSFiddle の例 2 - 壊れている
フィドルからのコード:
HTML:
<ul id="homepage-grid">
<li id="tile11" class="col1 row1 sizex1 sizey1">
<a href="#" title="test">
<img src="http://placehold.it/295x160" alt="test" title="test" style="width: 295px;height: 160px" />
</a>
</li>
<li id="tile8" class="col2 row1 sizex2 sizey1 last">
<a href="#" title="test">
<img src="http://placehold.it/602x160" alt="test" title="test" style="width: 602px;height: 160px" />
</a>
</li>
<li id="tile1" class="col1 row2 sizex1 sizey1">
<a href="#" title="testing">
<img src="http://placehold.it/295x160" alt="testing" title="testing" style="width: 295px;height: 160px" />
</a>
</li>
<li id="tile4" class="col2 row2 sizex2 sizey1 last">
<a href="#" title="test3">
<img src="http://placehold.it/602x160" alt="test3" title="test3" style="width: 602px;height: 160px" />
</a>
</li>
<li id="tile10" class="col1 row3 sizex1 sizey2">
<a href="#" title="test">
<img src="http://placehold.it/295x332" alt="test" title="test" style="width: 295px;height: 332px" />
</a>
</li>
<li id="tile12" class="col2 row3 sizex1 sizey2">
<a href="#" title="test">
<img src="http://placehold.it/295x332" alt="test" title="test" style="width: 295px;height: 332px" />
</a>
</li>
<li id="tile2" class="col3 row3 sizex1 sizey1 last">
<a href="#" title="testing2">
<img src="http://placehold.it/295x160" alt="testing2" title="testing2" style="width: 295px;height: 160px" />
</a>
</li>
<li id="tile9" class="col3 row4 sizex1 sizey1 last">
<a href="#" title="test">
<img src="http://placehold.it/295x160" alt="test" title="test" style="width: 295px;height: 160px" />
</a>
</li>
</ul>
CSS:
#homepage-grid {
width:910px;
position:relative;
padding:0;
overflow: hidden;
}
#homepage-grid li {
list-style:none;
float:left;
padding:0 12px 12px 0;
display:block;
}
#homepage-grid li.last {
list-style:none;
float:left;
padding:0 0 12px 0;
}
#homepage-grid li a {
display:block;
}
基本的に私が作成したいのは、データベースによって生成される動的グリッドです (データベース部分は現時点では正常に動作します)。グリッドでは、各タイルは最大 3 列の幅にまたがることができますが、無制限の行にまたがることができるため、問題が発生しているようです。
非常に動的なものの HTML/CSS に問題があります。ご覧のとおり、例 1 から例 2 への 1 つの小さな変更により、左下のタイルを押し上げてスペースを埋め、右のタイルを上に移動してそのスペースを埋める必要があるため、グリッドの大部分が壊れています。
ただし、コードを完全に制御できるので、必要に応じて HTML/CSS を変更できます (つまり、クラス/インライン スタイルなどを追加するなど)。
これは、表を使用すると (比較的) 簡単に機能すると思いますが、表形式のコンテンツではないため、実際にはその道をたどりたくありません。
CSS をこれほど動的にする方法はありますか?
これを実現するには、さらにインライン スタイルを使用する必要がありますか?
フローティングではなく絶対配置など、別の方法で行う必要がありますか?
これを達成する方法についての助けをいただければ幸いです。