0

20 個のアイコンがあり、それらから画像の中央の水平線を作成したいと考えています。しかし、レスポンシブにしたいので、HTMLテーブルを使用できません。モバイル ユーザー向けにラップする必要があります。HTML テーブルを使用すると、1 行 20 列を使用する必要があると思いますが、小さな画面では折り返されません。

このようなdivのグループを作成しました。これの見方はOKです。 http://jsfiddle.net/mayJ6/

<div style="display: inline-block; border: solid 1px black;">
    <a href="http://www.example.com" target="_blank" >
        <img src="http://profile.ak.fbcdn.net/hprofile-ak-prn1/157940_262105851352_1630693163_q.jpg"
           width="50" height="50" alt="photo"/>
    </a>
</div>

ただし、この回答は、この状況ではディスプレイインラインブロックを使用しないように指示しています。Twitter Bootstrap などを使用して、似たように見えるより良い解決策はありますか?

4

1 に答える 1

0

display: inline-block今回の件に関しては全く問題ないと思います。

あなたが参照している回答では、2 つまたは 3 つの列があり、それらを並べて表示したい場合など、メイン レイアウトについて話しています。

フロートでも同じ結果を得ることができますが、写真/アイコンをコンテナーでラップし、固定幅またはパディングを設定して、このように中央に配置する必要があります。ここの例のように幅をパーセンテージで設定すると、より小さな解像度でもラップされます: http://jsfiddle.net/E9pS9/

于 2013-04-27T16:20:32.423 に答える