7

Google サイトでウェブサイトを作成しています。3 列のレイアウトを選択し、画像を 1 つずつ配置します。画像の横にテキストを配置したいのですが、最初の行でしか機能せず、それも画像の「最後」にあります。以下のスクリーンショットは、私が言っていることを示しています。

スクリーンショット

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>

すべてのテキスト行を画像の横に配置するにはどうすればよいですか? 画像と同じ高さ、またはそのようなものです。

4

5 に答える 5

18

次のシナリオを実行する必要があります。

を使用してはdisplay:inline-blockどうですか？

1）<div/>それstyle=display:inline-blockを作ってvertical-align:top、そのdivの中に画像を入れてください。

2) 別の div を取得し、同じスタイルdisplay:inline-block;を指定して、すべてのラベル/div をこの div 内に配置します。

ここにあなたの要件のプロトタイプがあります

JS フィドルのデモ

于 2013-10-10T17:29:01.750 に答える
5

あなたまたは他のキツネがアイコン画像とリンクし、画像の横にリンクテキストとしてテキストをリンクする必要がある場合は、次のコードを参照してください。

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>

ここに画像の説明を入力

画像が表示されている場合、白い部分は画像アイコンで、他の部分はこのようにスタイルです。デザインしたい任意のタイプのアイコンでさまざまなボタンを作成できます

于 2017-08-15T08:46:47.820 に答える