0

リストとして読み込まれる画像がたくさんあります。縦向き、横向きの画像もありますが、きれいに左揃えで表示したいのですが。これは私のCSSコードです：

#designgallery
{
    list-style-type:none;
    margin-top:15px;
    float:left;
}

#designgallery li
{
    display:block;
    margin:5px;
    background-color:#eee;
    padding:5px;
    float:left; 
}
.design-display 
{
    border:1px solid gray;
}
.Horizontal
{
    width:210px;
    height:122px;
}
.Vertical
{
    height:180px;
    width:122px;
}

これは私のHTMLです：

<ul id="designgallery">
<li> <img class="design-display Horizontal" src="1.jpg" /><!--some other stuff--> </li>
... many list items, some horizontal, some vertical
</ul>

しかし、これは私が得るものです：

右下隅の垂直方向の画像は、左側の新しい画像の行を開始するはずですが、どうすればよいですか？

右下隅の垂直方向の画像は、左側の新しい画像の行を開始するはずですが、どうすればよいですか？

4

1 に答える 1

1

「石積み」効果が必要な場合は、Javascript がソリューションです。

JavaScript がオプションではなく、実際に垂直方向と水平方向の画像の最大幅/高さがわかっている場合は、この fiddle のようにli要素にそれらの最大寸法を適用することで配置を強制できます。

欠点は、デザイン要件によっては望ましくない可能性がある画像の周りに余分なスペースを作成することですが、css を使用して少なくとも「見栄え」を良くすることができる場合があります。

于 2012-11-05T17:25:43.517 に答える