わかりました、私は次のような HTML セットアップを持っています:
<div class="bullet">
<div style="float: left; padding-right: 1em;">
<img src="images/ofn_bullet.png" alt="OFN" style="max-width: 100%; border: none;" />
</div>
<div style="float: left;">
Cooperative Business Assistance Corporation<br />Camden, NJ
</div>
<br class="clear" />
</div>
これらはたくさんあり、このページにリストされています: http://opportunityfinance.net/Test/2013conf/index.html 残念ながら、これを行う方法が他にわからないため、次々にリストされます。共同ホストごとにこれを行う簡単な方法はありますか?? 設定された<ul>
タグを使用して、これにタグを付けてみましたが(これは私の最初の試みでした)、ページのサイズが変更されたときに画像のサイズを変更する方法がわかりませんでしたので、その試みを破棄しました、上記の次の試みで行きました。しかし、今は他の問題を抱えています。基本的に、これらのタグはどちらも機能するはずのスタイルを持っていますが、下の写真を見ると... サイズを小さくすると正しく機能しません。list-type-image
<li>
div
float: left
正直、どうしようもないし、テーブルも使いたくない。ただし、可能であれば、横にあるテキストを画像の中央に配置する必要があります。可能であれば、2 行がvertically aligned
にあるようにします。middle
vertical-align: middle
いずれにせよ、ブラウザのサイズが縮小された場合でも、テキストが常に画像の右側に表示されるようにする必要があります。使用されているもののCSSは次のとおりです。
.clear
{
clear: both;
}
div.bullet
{
display: block;
width: 100%;
text-align: left;
}
私が使用しているものよりも、Co-Hosts 列のセットアップ ソリューションが優れているかどうか疑問に思っています。画面の解像度が小さい場合や携帯電話の場合は、ページのサイズを (テキストとすべて) 縮小する必要があることに注意してください。水平スクロールバーもありません。