Css 当最大化时，为什么在单词“quot；“和”；？

谢谢你的阅读

为了更清楚而重写-对于所有的混淆，我深表歉意。

请使用此JSFIDLE：

它适用于此代码：

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

簿记及；商业服务：经验证。可靠。准确。

无需B.S.即可轻松记账-给我们一个机会，我们会证明这一点。
(310) 204-4717

除了这一点之外，一切都完全按照需要运行：

将窗口（或结果窗格）尽可能大地展开

尽管内容和电话号码之间有大量空格，但在“和”之后仍有一个换行符。

为什么?

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

谢谢

更新：它确实是一个不向div宽度计数的图像。

在进一步研究这个问题时，我发现了这个问题：。这并不能完全解决问题，但可以解释问题

我最终还是采纳了类似于AJP的建议

最终版本如下：

---

我真的希望当宽度变窄时，我能让文本环绕图像，但去它的吧-我想你不可能拥有所有东西。至少不少于一百万小时=o）

我认为您只需要从文本中删除
：

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

簿记及；商业服务：经验证。可靠。精确的
无需B.S.即可轻松记账-给我们一个机会，我们会证明这一点。
(310) 204-4717

试试这个

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

簿记及；商业服务：经验证。可靠。准确。

无需B.S.即可轻松记账-给我们一个机会，我们会证明这一点。

(310) 204-4717

最新答复：

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

簿记及；商业服务：经验证。可靠。准确。

无需B.S.即可轻松记账-给我们一个机会，我们会证明这一点。

(310) 204-4717

为什么不宽度：在父div中为100%

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

---

或者可能我误解了你的问题？

你有两个问题需要解决：首先，你有
标签，用于设置行中文本的确切数量。你需要移除它们

但一旦你这样做了，文本将占据尽可能多的空间，并将电话号码向下推。接下来需要做的是在包含图像和文本的div上设置一个宽度。尝试60%并从那里使用它

---

一个更完整、更健壮的解决方案是使用网格系统：

使用

显示：内联块和灵活的宽度是一个可能的解决方案

谢谢！不过没有区别-检查必须更新没有显示的图像。在第二行的“and”之后仍然会有换行符。添加
边距底部：50px到图像
img
以便神奇地解决它；）那肯定管用。知道为什么将图像放在div中会导致换行吗？可能在计算div width时未使用图像宽度？div用作块。所以，当img和文本放在一起时，它会尝试将它们放在块中，这就是为什么你们会看到换行。是的，您可能会写关于计算中未使用图像宽度的内容。我不能肯定，所以我不能说。这是我找到的很好的参考页。。可能有一些有用的信息。[我很高兴它解决了您的问题。您能想出一种方法使文本环绕图像，而不是使块落在图像下方吗？我又尝试了一件事..取出浮动：从图像左侧..它对我有效嘿，对不起，JSFIDLE有一些混乱。请将更新后的文本与可见图像一起使用。这很好。您能思考吗一种允许文本在数字降到以下后展开的方法？它仍然只希望填充60%，尽管它现在没有数字占用其右侧的空间。将宽度更改为
最大宽度
？在数字降到以下后？我不确定您在找什么