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

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

Answer 1

现在定义 某个元素 display:inline-block; 或 vertical-align:top

就像这样

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

现在查看 live demo

文本图像文本内联HTML CSS

1 个答案: