0

読んでくれてありがとう。

より明確にするために書き直しました - すべての混乱をお詫びします。

この jsFiddle を使用してください: http://jsfiddle.net/Ghr8L/5/

それはこのコードのためです：

<div style='overflow:hidden;background-color:black;'>

    <div style='overflow:hidden; color:white; float:left;'>
        <img style='width:64px; float:left; margin-right:10px;' src='https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png' />
        Bookkeeping &amp; Business Services: Proven.  Reliable.  Accurate.<br>
        Hassle-Free bookkeeping with No B.S. - Give us a chance and we'll prove it.
    </div>

    <div style='float:right; margin-right: 10px; color:#EFDD6F; font-size:1.5em; line-height: 2em;'>(310) 204-4717</div>

</div>

この1つのことを除いて、すべてが必要に応じて正確に機能しています:

  1. ウィンドウ (または結果ペイン) を可能な限り大きくします。
  2. コンテンツと電話番号の間に大量のスペースがありますが、「and」という単語の後に改行があります。
  3. なんで？

画像を取り出すと期待どおりに動作するので、画像の幅と関係があるのではないかと思いますが、何が原因かわかりません。

ありがとう！

更新:実際には、div 幅にカウントされない画像です。

この問題をさらに調査しているときに、次の質問を見つけました:フローティング画像は DIV 幅にカウントされません。どうすればそうできますか? . それは正確には解決しませんが、説明します。

最終的に、AJPの提案に似たものに行き着きました。

最終版はこちら: http://jsfiddle.net/Ghr8L/18/

幅が狭くなるにつれてテキストを画像の周りに折り返すことができればいいのにと思いますが、それをねじ込みます-すべてを取得することはできないと思います. 少なくとも100万時間未満ではありません。=o)

4

5 に答える 5

1

これを試して。

<div style='overflow:hidden;background-color:black;'>


    <img style='width:64px; float:left; margin-right:10px;' src='https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png' />
     <div style='overflow:hidden; color:white; float:left;'>
    Bookkeeping &amp; Business Services: Proven.  Reliable.  Accurate.<br>
        Hassle-Free bookkeeping with No B.S. - Give us a chance and we'll prove it.<br>
</div>

<div style='float:right; margin-right: 10px; color:#EFDD6F; font-size:1.5em; line-height: 2em;'>(310) 204-4717</div>

更新された回答:

 <div style='overflow:hidden;background-color:black;'>

     <div style='overflow:hidden; color:white; float:left;'>
    <img style='width:64px; margin-right:10px;' src='https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png' />
    Bookkeeping &amp; Business Services: Proven.  Reliable.  Accurate.<br>
        Hassle-Free bookkeeping with No B.S. - Give us a chance and we'll prove it.<br>
</div>

<div style='float:right; margin-right: 10px; color:#EFDD6F; font-size:1.5em; line-height: 2em;'>(310) 204-4717</div>

</div>
于 2013-07-03T23:27:49.707 に答える
1

解決すべき問題が 2 つあります。まず、
行に表示されるテキストの正確な量を設定するタグがあります。それらを削除する必要があります。

しかし、それを行うと、テキストはできるだけ多くのスペースを占有し、電話番号を下に押し込みます. 次に行う必要があるのは、画像とテキストを含む div の幅を設定することです。60% を試して、そこから試してみてください。

より完全で堅牢なソリューションは、グリッド システムを使用することです: http://css-tricks.com/dont-overthink-it-grids/

于 2013-07-03T23:29:38.760 に答える
0

テキストから < br > を削除するだけでよいと思います。

<div style='overflow:hidden;background-color:black;'>

    <div style='overflow:hidden; color:white; float:left;'>
        <img style='width:64px;margin-bottom:50px;float:left; margin-right:10px;' src='/img/bigGreenCheckmark.png' />
        Bookkeeping &amp; Business Services: Proven.  Reliable.  Accurate.
        Hassle-Free bookkeeping with No B.S. - Give us a chance and we'll prove it.
    </div>

    <div style='float:right; margin-right: 10px; color:#EFDD6F; font-size:1.5em; line-height: 2em;'>(310) 204-4717</div>

</div>
于 2013-07-03T23:21:07.487 に答える
0

display: inline-block柔軟な幅を使用することが可能な解決策です。

http://jsfiddle.net/Ghr8L/13/

于 2013-07-03T23:37:29.263 に答える
0

親 div で width:100% を使用しないのはなぜですか?

<div style='overflow:hidden; color:white; float:left;width:100%;'>

http://jsfiddle.net/wx7ft/

または多分私はあなたの質問を誤解しましたか?

于 2013-07-03T23:28:50.683 に答える