Question

感谢阅读。

重写更清楚 - 抱歉所有的困惑。

请使用这个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>

除了这一件事之外，一切都按照需要完成：

展开窗口（或结果窗格），尽可能大。
即使内容与电话号码之间存在大量空格，“and”字后面仍有换行符。
为什么？

我怀疑它与图像的宽度有关，因为如果你把图像拿出来它会按预期工作，但我还没有发现什么。

谢谢！

更新：确实是图像没有计入div宽度。

在进一步研究此问题时，我发现了这个问题：A floated image does not count toward DIV width, how can I make it so?。这并没有完全解决它，但确实解释了它。

我最终得到的结果类似于AJP的建议。

finall版本在这里：http://jsfiddle.net/Ghr8L/18/

我真的希望当宽度变窄时，我可以将文字环绕在图像周围，但要拧紧它 - 我想你不能拥有一切。至少不会在不到一百万小时。 = O）

Answer 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>

Answer 2

您有两个问题需要解决：首先，您有一些标签可以设置将在线上的确切文本数量。你需要删除它们。

但是，一旦你这样做，文本将占用尽可能多的空间，并将电话号码向下推。您需要做的下一件事是在包含图像和文本的div上设置宽度。尝试60％并从那里玩。

更完整，更强大的解决方案是使用网格系统：http://css-tricks.com/dont-overthink-it-grids/

Answer 3

我认为你只需要删除＆lt; br＆gt;来自文：

<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>

Answer 4

为什么不宽度：父div中的100％，

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

http://jsfiddle.net/wx7ft/

或者我误解了你的问题？

Answer 5

使用display: inline-block和灵活的宽度是一种可能的解决方案。

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

当最大化时，为什么在“和”之后会有换行符？

5 个答案: