3

リスト項目が<ul>ありdisplay:inline-blockます-期待どおりに表示され、行末に到達すると段落内のテキストのように折り返されます。1 行目に 4 つ、2 行目に 2 つの 6 つの要素がある例を参照してください。

末尾の要素を下ではなく上に配置したいと思います。前の例に基づいて構築するには、要素が 6 つある場合、2 つを上に、4 つを下に配置します。

ここに私が探している要素の更新バージョンがあります<ul>が、このソリューションでは複数の要素を使用していますが、要素の数は頻繁に変更され、特にモバイル デバイスを考慮して毎回ハード コードすることはできないため、オプションではありません。

可能であれば、JavaScript 以外のソリューションを希望します。私がほのめかしたように、それはすべてのページ幅に適合する応答性の高いソリューションでなければなりません (常に上に 2 つ、下に 6 つ、通常は下に多く、上に少ないだけでなくても問題ありません)。

私の最大の問題は、一部の画面サイズで、サイズと配置が原因で要素が逆さまのピラミッド形状を作成していることです。正しい向きのピラミッドが望ましいと思います。

視覚学習者向け

とは

ここに画像の説明を入力

どうあるべきか ここに画像の説明を入力

関連するサンプルコード

HTML

<ul>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>

CSS

li{
    display:inline-block;
    list-style-type:none;
}
4

4 に答える 4

1

html 要素の順序を逆にしないのはなぜですか? とにかく、ここに示すように Js を使用して順序を逆にすることができます: jQuery reversing the order of child elements

または、フレックスボックスのサポートが不足していますが、フレックスボックスを使用してみることができます: http://caniuse.com/#search=flex

于 2013-04-18T22:55:12.373 に答える
1

試してみるべきですか：

li{
  display:inline-block;
  list-style-type:none;
}
<ul>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <br>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>

于 2015-06-08T03:48:31.470 に答える
1

CSSで実現できました。位置を相対に設定し、100% に設定された top 属性を追加すると、要素は下から上にレンダリングされます。

于 2014-02-16T01:38:25.313 に答える