将图像与标题左侧对齐 - html

Question

我正在制作一个 android 应用程序，这个 html 文件位于资产文件夹中。我想在标题左侧对齐一条垂直直线，就像在雅虎新闻摘要应用程序中所做的一样。请在此处查看屏幕截图 http://bit.ly/1BRljIX。

我尝试使用下面的代码：

<img style="display: ;" src="sidebar_leader.png" width="2%"/>
<h3 style="display: inline;">We want sport to be safe, we want sport to be fun and we want to ensure that no matter what sport young people are involved in, that it takes place in the spirit of 'fair play'.</h3>

然而，这只是将图像与标题的第一行对齐，有人能帮忙吗？

Answer 1

见fiddle

试试这个

<img style="float:left;" src="sidebar_leader.png" width="2%" height="100px"/>
<h3 style="float:left;width:98%;">We want sport to be safe, we want sport to be fun and we want to ensure that no matter what sport young people are involved in, that it takes place in the spirit of 'fair play'.</h3>

我使用了 float:left; 而不是 display:inline;..我给出了 98% 的宽度，实际上是 100%-（img 的宽度）

Answer 2

您可以完全废弃图像并使用 border-left 和一些 padding-left 到 space 的东西。

这样您将减少对托管服务器的请求（因为您将不再需要图像文件）并且您的页面将更轻量级，因此对移动设备更友好。

使用 CSS 样式表，而不是像您正在使用的内联样式，代码如下：

h3 {
  border-left: 4px solid #3BB6FE;
  padding-left: 10px;
}

<h3>We want sport to be safe, we want sport to be fun and we want to ensure that no matter what sport young people are involved in, that it takes place in the spirit of 'fair play'.</h3>

使用样式表有其好处，因为您可以在一个地方为所有 h3 元素分配样式，如果以后需要更新设计，您只需更改它在一个地方，而不是试图在您的应用程序中找到该特定样式的每个实例。

如果您希望继续使用内联样式路线，您的代码如下：

<h3 style="border-left: 4px solid #3BB6FE; padding-left: 10px;">We want sport to be safe, we want sport to be fun and we want to ensure that no matter what sport young people are involved in, that it takes place in the spirit of 'fair play'.</h3>

将图像与标题左侧对齐 - html

Align image to left of heading - html

html

android

image

alignment

见fiddle