0

2 つのコラムを作成中です。最初の列には画像が表示され、2 番目の列には画像が (基本的に) クリックされた回数に関連付けられた数値が表示されます。したがって、2 つを並べる必要がありますが、画像を並べる必要があるだけでなく、番号も並べる必要があります。だから私の質問は、テーブルでこれを行うか、2 つの div を作成し、リスト項目を各 div に配置してから、それらを隣り合わせにフロートさせる方が良いですか?

より良い方法があれば、私は開いています。

オプション1

<div>
    <div style="float:left">
        <ul>
            <li><img></li>
            <li><img></li>
            <li><img></li>
        </ul>
    </div>
    <div style="float:left">
        <ul>
            <li><value></li>
            <li><value></li>
            <li><value></li>
        </ul>
    </div>
</div>

オプション 2

<table>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
</table>

これを行うためのより良い方法があると確信しています。どちらもうまくいくと思いますが、もっと良いものがあるはずです。特に、それらをすべて並べて機能させるには、非常に多くの CSS が必要になるためです。

最終結果: CSS

img{
float:left;
clear:left;
}

 span{
  clear:right;
  float:right;
}

HTML

<ul>
    <li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
    <li><img /><span>value</span></li>
</ul>
4

2 に答える 2

1

同じリストアイテムに画像と値を含むリストを1つだけ保持します。つまり、次のようになります。

<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>

このように、値は常に画像の横に表示され、スパンを使用して直接スタイル設定できます。

これにはテーブルを使用しないでください。上記の方法が不適切な場合は、2つのリストを並べるためにjqueryを作成できますが、上記の方法imoを使用する方がはるかに便利です。

于 2013-03-15T01:07:10.837 に答える
-1

テーブルを使用します。理解と維持がより簡単です。画像の高さがさまざまな場合に、項目を垂直方向に簡単に整列できるようにします。

于 2013-03-15T01:12:31.707 に答える