0

作業例とJS Fiddle

ul liパーセンテージを使用して等間隔でアイテムを表示するリストを作成する、これに対する解決策を考え出そうとしています。

つまり、ブロック (テキストがオーバーレイされた画像) の両方のサイズが小さくなり、ブロック間のスペースが iPad サイズに縮小されます。典型的な携帯電話の解像度では、スタックします。

要素は 3 つありますが、パーセンテージを使用する利点は、CSS の大部分をやり直すことなく追加の要素を追加できることです。願わくば、ブロック (この場合liはアイテム) のサイズとスペースがそれに応じて調整されることを願っています。

ここで等間隔の CSS トリックを試してみましたが、レスポンシブにはあまり適していません。

max-width:100%サイズを変更せずに大きな画像を使用できるように、画像を現在の最大幅にサイズ変更するために使用する予定liです (画像を交換する際の時間を節約し、同じ画像をサイトの他の場所で使用できることを意味します)。

lidivlist を使用する必要はありません。単純なまたはspan構造体を使用することができます。

何か案は？

最初の問題:私のJS Fiddleの例では、ウィンドウ サイズに基づいて画像が整列およびサイズ変更されることがわかります。ただし、最も右端の要素は右端と同じ高さではありません (通常はすべて左揃えです)。追加しましtext-align:justifyたが、望ましい効果が得られていないようです

2 番目の問題: 3 が均等に割り切れないことが問題です。30% は真の 3 分の 1 ではなく、33% は押し出しているようです。

3 番目の問題:空白。li異なる行に配置されている の間の邪悪な空白を止める方法はありますか? 空白を取り除くために、読みやすい HTML を犠牲にする必要がありますか?

HTML:

<div id="bottomWide">
    <ul>
    <li><img src="#" alt="text"></li>
    <li><img src="#" alt="text"></li>
    <li><img src="#" alt="text"></li>
    </ul>
</div>

CSS:

ボトムワイド{

width:85%;
margin:0 auto;
border:1px solid red;}

ボトムワイドul{

margin:0;
padding:0;

}

ボトムワイドリ{

list-style-type: none;
display: inline-block;
width:30%;
text-align:justify;

}

ボトムワイド img{

max-width:100%;

}

スタッキング用のメディア クエリ (うまく機能します)

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
/* Styles */
    #bottomWide li{
    display:block;
    width:100%;
}
}
4

1 に答える 1

4

これは 1 つの方法です。

http://jsfiddle.net/YT3KZ/3/

float:left;Li を aではなくdisplay:inline-block;aに変更しmargin-left: 1%;、幅を 32.333% にして、1% のマージンを補い、div 全体に広げました。

これにより、li が左に 1% のマージンで配置され、右に 1% がカットされるため、ul に負のマージンを設定してこれに対抗する必要があります。または、これを行うために位置クラスを追加することもできます。

margin-left:-1%;

別の方法としては、コンテナーをページ幅よりも広くして適切に配置し、負のマージン/パディングを使用して切り取られる部分を補うことです。

PS。ギャップが欲しくないことに気づきました..を削除して1% marginに変更しliます33.333%

http://jsfiddle.net/YT3KZ/7/

注: 不要な CSS は削除していません。たとえばtext-align:justify;、それをきれいにすることができます。

于 2013-04-12T12:34:39.937 に答える