html - 如何在图片旁边放文字？

Question

我正在 Google 协作平台上创建一个网站。我选择了 3 列布局并一张一张地放置图像。我想将文本放在图像旁边，但它只适用于第一行，即使是在图像的“末尾”。下面的屏幕截图说明了我在说什么。

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>

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

Answer 1

你需要通过这些场景：

怎么用display:inline-block？

1）拿一个<div/>给它style=display:inline-block，vertical-align:top把图像放在那个div里。

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

这是您的要求的原型

JS 小提琴演示

Answer 2

使用浮动来浮动图像，文本应该在旁边换行

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

Answer 3

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

看看这个小提琴 ，我在网上用了一张照片，但你可以把它换成你的照片。

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