web-dev-qa-db-ja.com

画像（html）の横にテキストを配置する方法は？

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

screenshot

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 [〜＃〜] .:ここにコードをコピーする方法がわからなかったので、スクリーンショットを撮ります。私はそのことについて申し訳ありません。

htmlhtml5imagewebgoogle-sites
5
U23r

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

display:inline-block？

1）<div/> それを与える style=display:inline-block 成功する vertical-align:topそして、そのdiv内に画像を配置します。

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

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

JS Fiddle Demo

14
Dhaval Marthak

フロートを使用して画像をフロートします。テキストは横に折り返されます

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

4
user1994804

画像を作るfloat: left;およびテキストfloat: right;

これを見てください fiddle 私はオンラインで写真を使用しましたが、あなたの写真と交換することができます。

4
Nathan Yeung

あなたまたは画像の横にリンク画像としてテキスト画像とテキストを持つリンクを必要とする他のフォックスの場合、以下のコードを参照してください：

[〜＃〜] 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>

enter image description here

画像が表示される場合、白い部分は画像アイコンであり、他のスタイルはこの方法です。デザインする任意のタイプのアイコンで異なるボタンを作成できます

1
Mehdi Jalal

同様の問題があり、画像を保持する1つのdivとテキストを保持する1つの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;
}
0
Russel Fish