css和html-为什么一个左浮动的div被放在下面的行上？

我有如下HTML：

<div style="float: left; font-family: arial; padding-top: 40px; width: 655px; ">
    <div style="float: left;">
        <img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none;"  />
    </div>
    <div style="float: left; ">
        <p>
            <h1>mobile business plan, <br />
            business ideas, fundraising<br /> and marketing apps
            </h1>  <!-- font-size: 200%; -->
        </p>
    </div>
    <div style="clear:both;"></div>

有人知道如何使图像和文本显示在同一行上吗

---

谢谢

您需要为两个子项指定宽度。根据ChromeDevTools，第一个带有子图像的是512px宽。宽度：30%；在imgapove_fold_img上，img使用其父div的30%。例如：

---

在我的示例中，我保持了所有样式的内联，但是使用CSS更好。此外，“b”图像是512x512px。如果可以缩小它，则可以减少加载时间。

出于直观的原因，将div更改为30%，将图像更改为100%或90%，因此：

<div style="float: left; font-family: arial; padding-top: 40px; width: 655px;">
    <div style="float: left; width: 30%;">
        <img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none;"  />
    </div>

---

我认为仅仅给出一个答案是有帮助的，但op也想知道原因

您应该在包含上述内容的图像上声明一个宽度，以便div采用与您相同的宽度

<div style="float: left; font-family: arial; padding-top: 40px; width: 655px;">
    <div style="float: left;margin-right:20px">
        <img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" width="154">
    </div>
    <div style="float: left;">
        <p></p>
        <h1>mobile business plan, <br>
 business ideas, fundraising<br> and marketing apps
        </h1>  <!-- font-size: 200%; -->
        <p></p>
    </div>
    <div style="clear:both;"></div>
</div>

---

此外，您还应该尝试不使用空格，而是使用

尝试删除float:left；从最外层的div.ah开始，我是否应该将30%放在图像上？我是否应该将30%放在div上？放置适合您需要的宽度%或px。我会把图像的宽度和高度100%@trajce我不确定宽度的百分比应该是多少。我也不确定我是否应该使用像素，因为一些设备的屏幕可能更小。“有种被卡住的感觉。”Genadinik我加了一个例子。现在就试试看。谢谢。这并没有说明s的宽度，所以它们将保留在单独的行中。此外，图像将不会保持方形。对不起，我之前将100%宽度放置在错误的div上，请再次检查。。。将第一个宽度保持为655px，然后将包含图像的宽度更改为30%width@PeterFeatherstone第二节课输了，图像仍然会被拉伸，因为您没有为图像或其父div定义固定的宽度和高度。当我查看他发布的测试页面时，它就在那里…尽管看起来他找到了答案。

<div style="float: left; font-family: arial; padding-top: 40px; width: 655px;">
    <div style="float: left; width: 30%;">
        <img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none;"  />
    </div>

    img#above_fold_img
    {
      width: 100%;
      height: 100%;
    }

<div style="float: left; font-family: arial; padding-top: 40px; width: 655px;">
    <div style="float: left;margin-right:20px">
        <img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" width="154">
    </div>
    <div style="float: left;">
        <p></p>
        <h1>mobile business plan, <br>
 business ideas, fundraising<br> and marketing apps
        </h1>  <!-- font-size: 200%; -->
        <p></p>
    </div>
    <div style="clear:both;"></div>
</div>