画像の横に改行文字列　良い方法

お世話になっております。

html出力
1「
2 画像  左の画像は
3   」猫画像です。

とやりたいのですが

html出力
1「
2 画像  
3   」左の画像は
4猫画像です。

となってしまいます。
現在のソースは

html
1<p align="center"> 
2<img src="img/neko.gif" width="300" alt="" />
3左の画像は<br>
4猫画像です。
5</p>

どのようにやるのが良いのでしょうか？
コレだけのためにcss作るのもなんなので
tableでやろうとしていますが
ふともっと良い方法があるのではないかと思い
基本的な事で申し訳ないのですが上記お問い合わせいたします。

kei344

2017/03/31 10:56

「コレだけのためにcss作るのもなんなので」ということはCSS以外でという事でしょうか。

行動規範の内容に同意します

回答3件

既に回答が出ていますが、以下のように行うこともできると思います。
floatプロパティを使用する方法

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        img {
13            float: left;
14        }
15
16        p {
17            overflow: hidden;
18        }
19    </style>
20</head>
21<body>
22<div class="box">
23    <img src="https://placehold.jp/3d4070/ffffff/300x300.png?text=image" width="300" alt="画像">
24    <p>
25        左の画像は<br>猫画像です。
26    </p>
27</div>
28</body>
29</html>

flexを使用する方法

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .box {
13            display: flex;
14        }
15
16        .box img {
17            flex: 0 0 auto;
18        }
19    </style>
20</head>
21<body>
22<div class="box">
23    <img src="https://placehold.jp/3d4070/ffffff/300x300.png?text=image" width="300" alt="画像">
24    <p>
25        左の画像は<br>猫画像です。
26    </p>
27</div>
28</body>
29</html>

投稿2017/03/31 12:58

s8_chu

総合スコア14731

ベストアンサー

ふともっと良い方法があるのではないかと思い

それこそがスタイルシートなのです

投稿2017/03/31 11:03

退会済みユーザー

総合スコア0

LibertyBell3

2017/03/31 11:10

ですね(笑)。

moitaro

2017/04/03 00:33

皆様コメントありがとうございました。結局スタイルシート使う方がよろしいですね…… 稚拙な質問にご解答ありがとうございました。

行動規範の内容に同意します

画像と、その説明とすれば、dl/dt/ddで記述するのが適していると思います。

CSS
1#box {
2  margin:0 auto;
3}
4#box dl {
5  display:table;
6  width:100%;
7}
8#box dl dt,#box dl dd {
9  display:table-cell;
10  vertical-align:middle;
11}
12#box dl dt {
13  width:300px;
14}
15#box dl dd p {
16  paddind:適切に;
17  /* その他フォントサイズなどを指定 */
18}

HTML
1<div id="box">
2  <dl>
3    <dt><img src="img/neko.gif" width="300" alt=""></dt>
4    <dd><p>左の画像は<br>猫画像です。</p></dd>
5  </dl>
6</div>

上記は、テーブルでやろうかと…ということでしたので、
displayはテーブル関連にしておきました。
他にも、floatやらflexでもレイアウトできます。

投稿2017/03/31 10:56

LibertyBell3

総合スコア1084

moitaro

2017/04/04 01:38

ありがとうございます。仰る通りdldtddの方が適していますね…… 次回このような記述が必要な際にはそちらで表記してみます。コメントありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像の横に改行文字列　良い方法

関連した質問