左侧的图标和右侧HTML / CSS上的文本

时间:2012-01-09 13:17:27

标签: html css

我认为这听起来很简单,但我仍然无法让它发挥作用。

我的设计有不同大小和高度相同的图标,我需要在另一个下方显示它们,同时我需要在右侧为每个图标提供一个关于图标的小描述。

右侧每个图标的文本由两行组成,第一行以粗体显示(标题),第二行以普通(描述)显示。填充和边距是我的电话。但我需要在我的内容中以这种方式显示它们。

3 个答案:

答案 0 :(得分:3)

你可以简单地左对齐你的图像,然后用换行符划分你的文字的两行

<img src="image.jpg" style="float:left;" />
<strong>Header</strong><br />
<span>description</span>

答案 1 :(得分:1)

this fiddle应该让你朝着正确的方向前进。

它基本上会浮动<img><p>

它不是一个完成的艺术品,但它应该指向正确的方向。

答案 2 :(得分:0)

查看此fiddle

基本上有一个容器div里面有一个无序列表,每个列表项左边有一个背景图像,右边有文本,没有使用浮点数。