html - 文本图像文本内联 HTML CSS

Question

有文本然后是带有文本的图像的最佳方式是什么？如果可能的话，我不想使用表格，但我遇到了项目打破自己的行的问题。

到目前为止，以下是我的代码和 css：

<div id="header_number">
    <h2 class="phone_title">Call Us Today!</h2>
    <img src="images/phone_icon.jpg" alt="Call us Today"/>
    <h2 class="large_num">1-800-555-9999</h2>
</div>

CSS：

h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}

我认为display:inline;容器中的 div (header_number) 会将所有内容排成一行，但这不起作用。如果需要，我可以添加一个类，img如果这是我唯一的选择，则将剩下的所有内容浮动。

Answer 1

现在定义你的一些元素 display:inline-block; 或 vertical-align:top

像这样

h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}

现在查看现场演示