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. 尽可能大地展开窗口（或结果窗格）。
  2. 尽管内容和电话号码之间有大量空格，但“和”一词之后还是有一个换行符。
  3. 为什么？

我怀疑这与图像的宽度有关，因为如果您将图像取出，它会按预期工作，但我还没有发现是什么。

谢谢！

更新：这确实是不计入 div 宽度的图像。

在进一步研究这个问题时，我发现了这个问题：浮动图像不计入 DIV 宽度，我该如何做到这一点？. 这并不能完全解决它，但确实可以解释它。

我最终采用了类似于 AJP 建议的方法。

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

我真的希望当宽度变窄时我可以让文字环绕图像，但是搞砸了 - 我想你不能拥有一切。至少不会在一百万小时内。=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

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

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

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

于 2013-07-03T23:29:38.760 回答
0

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

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

于 2013-07-03T23:37:29.263 回答
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

为什么不在父 div 中 width:100% ？

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

http://jsfiddle.net/wx7ft/

或者我误解了你的问题？

于 2013-07-03T23:28:50.683 回答