html - HTMLでテキストと画像を隣り合わせに配置する方法は?

Question

テキストと画像を隣り合わせにしたいのですが、画像を画面の左端に配置し、テキストを画面の右端に配置したいと考えています。これは私が現在持っているものです....

<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>

これどうやってするの？

ありがとう

score 38 · Accepted Answer

img {
    float:left;
}
h3 {
    float:right;
}

clear:bothフローティング要素の真下にスライドアップしないように、提供したコードの後に来るすべての要素でスタイルを使用することをお勧めします。

score 7 · Accepted Answer

これにcss floatを使用したい場合は、コードに直接配置できます。

<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>

しかし、css の基本を学び、すべてのスタイリングを別のスタイルシートに分割し、クラスを使用することを強くお勧めします。それは将来あなたを助けるでしょう。開始するのに適した場所はw3schools です。または、後で道をたどると、Mozzila Dev になります。ネットワーク (MDN)。

HTML:

<body>
  <img src="website_art.png" class="myImage"/>
  <h3 class="heading">The Art of Gaming</h3>
</body>

CSS:

.myImage {
  float: left;
  height: 75px;
  width: 235px;
  font-family: Veranda;
}
.heading {
  float:right;
}

score 0 · Accepted Answer

Vertical-align とフローティングを使用できます。

ほとんどの場合、垂直方向に配置する必要があります: 中央の画像です。

垂直整列: ベースライン|長さ|サブ|スーパー|トップ|テキストトップ|ミドル|ボトム|テキストボトム|初期|継承;

middle の定義は次のとおりです。要素は親要素の中央に配置されます。

そのため、要素内のすべての要素にそれを適用したい場合があります。

3 に答える 3