如何在图像旁边放置文本（html）？

Question

我正在Google Sites建立一个网站。我选择3列布局并逐个放置图像。我想把文本放在imagem旁边，但它只适用于第一行，甚至是在图像的“结尾”。下面的截图说明了我在说什么。

html代码：

<div style="display:block;text-align:left">
<h2><span style="color:rgb(7,55,99)">Students</span></h2>
<hr>
<br>
<div style="display:block;text-align:left"><a href="https://some.addres" imageanchor="1"><img align="left" src="https://some.addres/blue-user-icon.png" border="0"></a>- Name<br>
- Major<br>
- Email<br>
- Lattest</div>
</div>
<br>
<br>

那么，我该怎么做才能将所有文本行放在图像旁边？就像，在图像的同一高度，或类似的东西。

PS ：我不知道如何在这里复制代码，所以我拍了一张截图。对不起，我很抱歉。

Answer 1

你需要了解这些情况：

如何使用display:inline-block？

1）选择一个<div/>给它style=display:inline-block将其设为vertical-align:top并将图片放入该div中。

2）取另一个div并给它相同的样式display:inline-block;并将所有标签/ div放在这个div中。

以下是您要求的原型

JS Fiddle Demo

Answer 2

制作图片float: left;和文字float: right;

看看这个fiddle我在网上使用了一张图片，但你可以换掉它来拍照。

Answer 3

使用浮动来浮动图像，文本应该包裹在

旁边

http://www.w3schools.com/css/css_float.asp

Answer 4

如果您或其他需要与图标图像链接并且文本作为图像旁边的链接文本的其他狐狸，请参阅以下代码：

<强> CSS

.linkWithImageIcon{

    Display:inline-block;
}
.MyLink{
  Background:#FF3300;
  width:200px;
  height:70px;
  vertical-align:top;
  display:inline-block; font-weight:bold;
} 

.MyLinkText{
  /*---The margin depends on how the image size is ---*/
  display:inline-block; margin-top:5px;
}

HTML

<a href="#" class="MyLink"><img src="./yourImageIcon.png" /><span class="MyLinkText">SIGN IN</span></a>

如果你看到图像，白色部分是图像图标，其他是样式 这样，您可以使用任何类型的图标创建不同的按钮

Answer 5

我有一个类似的问题，我有一个div拿着图像，还有一个div拿着文字。我没有工作的原因是，持有图片的div有display: inline-block，而持有文字的div有display: inline。

我将其更改为display: inline并且有效。

以下是带有徽标，标题和标语的基本标题部分的解决方案：

<强> HTML

<div class="site-branding">
  <div class="site-branding-logo">
    <img src="add/Your/URI/Here" alt="what Is The Image About?" />
  </div>
</div>
<div class="site-branding-text">
  <h1 id="site-title">Site Title</h1>
  <h2 id="site-tagline">Site Tagline</h2>
</div>

<强> CSS

div.site-branding { /* Position Logo and Text  */
  display: inline-block;
  vertical-align: middle;
}

div.site-branding-logo { /* Position logo within site-branding */
  display: inline;
  vertical-align: middle;
}

div.site-branding-text { /* Position text within site-branding */
    display: inline;
    width: 350px;
    margin: auto 0;
    vertical-align: middle;
}

div.site-branding-title { /* Position title within text */
    display: inline;
}

div.site-branding-tagline { /* Position tagline within text */
    display: block;
}