0

わかりました、私は次のような 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>divfloat: left

画像の右側にとどまる代わりに、テキストを次の行に折り返す

正直、どうしようもないし、テーブルも使いたくない。ただし、可能であれば、横にあるテキストを画像の中央に配置する必要があります。可能であれば、2 行がvertically alignedにあるようにします。middle vertical-align: middleいずれにせよ、ブラウザのサイズが縮小された場合でも、テキストが常に画像の右側に表示されるようにする必要があります。使用されているもののCSSは次のとおりです。

.clear
{
    clear: both;
}

div.bullet
{
    display: block;
    width: 100%;
    text-align: left;
}

私が使用しているものよりも、Co-Hosts 列のセットアップ ソリューションが優れているかどうか疑問に思っています。画面の解像度が小さい場合や携帯電話の場合は、ページのサイズを (テキストとすべて) 縮小する必要があることに注意してください。水平スクロールバーもありません。

4

2 に答える 2

0

cohosts を順不同のリストとして持つことができます。次に、各リスト項目の背景画像として画像を設定できます。

<ul class='cohosts'>
    <li>The text</li>
    <li>The text</li>
</ul>

次に、CSSを次のように設定します

.cohosts li {
    padding-left: 20px; /* Whatever the with of the image */
    background-image: url('images/ofn_bullet.png');
}
于 2013-03-28T00:50:16.543 に答える
0

（テキストdiv）を削除float: left;してみてください.bullet

于 2013-03-28T00:36:18.263 に答える