0

私は 2 つの div を持っています。1 つは画像で、もう 1 つはテキストです。これら 2 つの div を親 div 内に配置し、ヘッダーとして使用しています。私の画像はテキストよりもはるかに高くなっています。私がやりたいのは、画像を左側に、右側のテキストを下部に垂直に配置して、画像の下部に合わせることです。私はこれを行うのに苦労しています。また、携帯電話でページを表示すると、幅のためにテキストが次の行に分割されますが、float:right を使用すると右に移動するため、float は使用できません。私がしようとしていること。 

<div id="header" style="overflow:auto"><div style="float:left;">

<img src="Images/crescentlogo.png" /></div>

<div><h4 class="gold">Daily <span class="DarkGreen">EXCEEDING</span> <span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4></div>

</div>

何か案は？

ありがとう、

4

2 に答える 2

1

コードは次のとおりです。

<!DOCTYPE html>
 <html>
<head>
<style>
    h4{
        display: inline;
    }
</style>
</head>
<body><div id="header">
<img src="Images/crescentlogo.png" id="img" />

<div id="text" style="display: inline;"><h4 class="gold">Daily <span    
class="DarkGreen">EXCEEDING</span>
    <span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4>    </div>

</div>
     </body>
    </html>

JSFiddle のリンク: http://jsfiddle.net/w5wCG/1/

于 2013-01-26T03:55:31.930 に答える
0

贈るfloat:leftとimg贈るfloat:leftをdiv並べて配置します

img div {
    float:left; }
于 2013-01-26T03:36:33.663 に答える