0

我有两个div，一个是图片，另一个是文本。我将这两个 div 放在父 div 中并用作我的标题。我的图像比文字高得多。我想要做的是将图像一直放在左侧，右侧的文本在底部垂直对齐以与图像底部对齐。我很难做到这一点。另外，我不能使用浮动，因为当我在手机上查看页面时，由于宽度，文本会中断到下一行，这很好，但使用 float:right 它会向右移动，这不是我想要的我正在尝试什么。 

<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，它会并排放置imgfloat:leftdiv

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