0

我有这样的 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>

它看起来像这样。这是一个测试页面： http: //problemio.com/index_test.php

蓝色 B 应该与文本在同一行。但可能是因为原始图像尺寸非常大，它的尺寸被搞砸了。

这是img的css：

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

有人知道如何使图像和文本出现在同一行吗？

谢谢！

4

3 回答 3

5

您需要为两个 child 指定宽度<div>。根据 Chrome DevTools，第一个<div>（带有子图像）是 512px 宽。

width: 30%;onimg#above_fold_img使用其父 div 的 30%。

例子：

<div style="float: left; width: 256px; height: 256px; margin: 0">
    <img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none; width: 256px; height: 256px" />
</div>
<div style="float: left; width: 393px; margin: 0; margin-left: 5px">
    <p>
        <h1>mobile business plan, <br />
        business ideas, fundraising<br /> and marketing apps
        </h1>  <!-- font-size: 200%; -->
    </p>
</div>

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

于 2013-04-12T22:46:34.677 回答
2

我认为只是给出一个答案会有所帮助，但 op 也想知道为什么..

您应该在包含 #above_fold_img 的图像上声明一个宽度，以便 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>

另外，您应该尽量不要<p></p>用作空格，而是<br/>要这样做

于 2013-04-12T23:17:11.827 回答
1

出于审美原因，将您的 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>

和 CSS：

    img#above_fold_img
    {
      width: 100%;
      height: 100%;
    }
于 2013-04-12T22:51:00.433 回答