0

アクセスできない PHP ファイルから、<li>"liElHtml" のクラスを持つ一連の要素を受け取ります。これらには画像が含まれているため、基本的には AJAX 経由でこれを受け取ります。

<li class="liElHtml"><img src="some_img.png" /></li>

静的な幅を持たずにこれらを3行にきちんと/均等に積み重ねる方法はありますか? 私が知っている唯一の方法は、3<li>の合計幅を に設定すること<ul>です。私はグーグルで調べましたが、静的な幅が私が見る唯一の方法であるようです。

残念ながら、これは携帯電話用であるため、画面いっぱいに表示するには 100% 幅で 3 行にする必要があります。今、それを機能させるために、静的な幅を設定したので、html 用に持っています:

<ul id="mainScreenUL">
</ul>

CSS:

#mainScreenUL{
    list-style:none;
    width:150px;
}

#liElHtml{
   display:inline-block;
   width:50px;
   height:50px;
}

そしてjQuery/javascript

$('#mainScreenUL').html(pic_data[1]);

は、のpic_data[1]1 つの長い文字列です。<li class="liElHtml"><img src="some_img.png" /></li>

これにより、やや望ましい効果が得られますが、とにかく幅をwidth:100%オンに設定して#mainScreenUL、 を<li>3 行だけにきちんと積み重ねることができますか? これを読んでいただきありがとうございます。どんな助けでも大歓迎です。

4

2 に答える 2

3

すべてliが同じ高さの場合、簡単にそれらを浮かせて、この方法で 33.33% の幅を割り当てることができます

li {
   float: left;
   width: 33.33%;
}

ul次に、要素にフロートクリアを適用することを忘れないでください

于 2012-10-02T09:14:12.090 に答える
1 
li {
   float: left;
   width: 33.33%;
}

100% が必要で、HTML を編集できる場合は、最初と最後のリスト項目を33%に、中央の項目を に設定し34%ます。

li {
    float: left;
}

.first, ,last {
    width: 33%;
}

.middle {
    width: 34%;
}

33.33%これは、境界線/マージンなどが必要な場合に変更されますが、葉を使用する小さな小さなギャップが取り除かれます.

HTML に触れることができない場合は、いつでもセレクターを使用でき:first-childます:last-childが、一部のブラウザーのサポートに苦労する可能性があります。

于 2012-10-02T09:16:23.827 に答える