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

【问题标题】：Align image to left of heading - html将图像与标题左侧对齐 - html
【发布时间】：2015-03-22 18:50:14
【问题描述】：

我正在制作一个 android 应用程序，这个 html 文件位于 assets 文件夹中。我想将一条垂直直线对齐到标题的左侧，就像在雅虎新闻摘要应用程序中所做的那样。请参阅此处的屏幕截图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>

但是，这只是将图像与标题的第一行对齐，有人可以帮忙吗？

【问题讨论】：

标签： android html image alignment

【解决方案1】：

您可以完全废弃图像并使用border-left 和一点padding-left 来分隔内容。

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

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

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

&lt;h3&gt;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'.&lt;/h3&gt;

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

如果您希望继续使用 inline-styles 路线，您的代码将如下所示：

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

【讨论】：

【解决方案2】：

见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 的宽度）

【讨论】：