Question

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

<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>

有什么想法吗？

谢谢，

Answer 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/

Answer 2

将float:left提供给img并将float:left提供给div，它会并排放置

img div {
    float:left; }

并排放置两个div

2 个答案: