提问人：Eli 提问时间：7/4/2013 最后编辑：CommunityEli 更新时间：7/4/2013 访问量：84
当最大化时，为什么“和”这个词后面有换行符？
When maximized, why is there a line break after the word "and"?
问：
感谢您的阅读。
重写得更清楚 - 很抱歉造成所有混乱。
请使用这个 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 & 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 宽度的图像。
在进一步研究这个问题时，我发现了这个问题：浮动图像不计入 DIV 宽度，我怎样才能做到这一点？这并不能完全解决它，但确实可以解释它。
我最终选择了类似于 AJP 的建议。
finall 版本在这里：http://jsfiddle.net/Ghr8L/18/
我真的希望我能在宽度变窄时让文本环绕图像，但搞砸了 - 我想你不可能拥有一切。至少不会少于一百万小时。=o）
答：
0赞
Ron
7/4/2013
#1
我认为您只需要从文本中删除 < 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 & 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>
评论
0赞
Eli
7/4/2013
谢谢！虽然没有区别 - 检查 jsfiddle.net/Ghr8L/6 必须更新图像未显示。在第二行中的单词“and”之后仍然有一个换行符。
0赞
Ron
7/4/2013
添加到图像中，以便神奇地解决;)margin-bottom:50px;img
1赞
AJP
7/4/2013
#2
试试这个。
<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 & 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 & 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>
评论
0赞
Eli
7/4/2013
这绝对有效。知道为什么将图像放在 div 中会导致换行吗？也许图像宽度没有用于 div 宽度的计算？
0赞
AJP
7/4/2013
Div 作为块工作。因此，当 img 与文本一起放入时，它会尝试将它们放入块中，这就是您看到换行的原因。是的，您可能正在写关于图像宽度未用于计算。我不确定，所以我不能说话。这是我找到的很好的参考页面..可能有一些有用的信息。[htmlquick.com/reference/tags/div.html] 我很高兴它解决了你的问题。
0赞
Eli
7/4/2013
你能想出一种方法让文本环绕在图像周围，而不是落在它下面的块吗？
0赞
AJP
7/4/2013
我又尝试了一件事。从图像中取出 float：left..它对我有用
0赞
Renzo Cortez
7/4/2013
#3
为什么不在父 div 中 width：100% ？
<div style='overflow:hidden; color:white; float:left;width:100%;'>
或者也许我误解了你的问题？
评论
0赞
Eli
7/4/2013
嘿，对不起，jsFiddle 有些混淆。请使用带有可见图像的更新版本。
1赞
matthewmatician
7/4/2013
#4
您有两个问题需要解决：首先，您有
标签，这些标签设置了将要上行的确切文本量。您需要删除它们。
但是一旦你这样做了，文本就会占用尽可能多的空间，并将电话号码推到下面。您需要做的下一件事是在包含图像和文本的 div 上设置宽度。尝试 60% 并从那里开始玩。
一个更完整、更强大的解决方案是使用网格系统：http://css-tricks.com/dont-overthink-it-grids/
0赞
mehulkar
7/4/2013
#5
使用灵活的宽度是一种可能的解决方案。display: inline-block
评论
0赞
Eli
7/4/2013
这很好。你能想出一种方法让文本在数字低于以下后扩展吗？它仍然只想填充 60% 的事件，尽管它现在没有占用其右侧空间的数字。
0赞
mehulkar
7/4/2013
将宽度更改为 ？数字低于什么之后？不确定我是否理解您在寻找什么max-width
评论