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

両方の子の幅を指定する必要があります<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 に答える