htmlでの画像の配置について

現在このような書き方をしていまして、

css
1img.frl {
2	float: right;
3	margin-left: 10px;
4	margin-bottom: 10px;
5	width:360px;
6	height:470px;
7}

html
1
2・テキストテキストテキスト
3テキストテキストテキストテキストテキストテキストテキストテキストテキスト
4テキストテキストテキストテキストテキストテキストテキストテキストテキスト
5
6
7<img src="img1/new1.jpg" alt="" class="frl">
8<img src="img1/new2.jpg" alt=""class="frl">
9<img src="img1/new3.jpg" alt=""class="frl">
10
11
12テキストテキスト
13テキストテキストテキストテキストテキスト
14テキストテキストテキスト
15テキストテキストテキストテキストテキストテキストテキストテキスト
16
17テキストテキストテキストテキスト
18テキストテキストテキストテキストテキストテキストテキストテキストテキスト
19
20<img src="img1/new4.jpeg" alt=""class="frl">
21
22・テキストテキストテキスト
23テキストテキストテキストテキストテキストテキストテキストテキストテキスト
24テキストテキストテキスト
25
26
27テキスト
28テキストテキスト
29
30テキストテキストテキストテキストテキストテキスト
31テキストテキストテキストテキスト
32テキストテキストテキストテキストテキストテキストテキスト
33
34<img src="img1/new5.jpg" alt=""class="frl">
35<img src="img1/new6.jpg" alt=""class="frl">
36<img src="img1/new7.jpg" alt=""class="frl">
37

以下のイメージ画面のように画像を並べるにはどのように書いたらいいのでしょうか...

現状の状態が、以下のような表示になっていてまして、

これを、以下の画像のイメージのようにしたいのです。

イメージ画像通りの画像配置にするにはどうしたらよいのでしょう。。。？
※width、heightを指定しているのは元の画像が多き過ぎて
小さくするために使っています。

kei344

2017/06/07 12:25

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

kei344

2017/06/07 13:03

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答4件

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        img {
13            display: block;
14        }
15
16        .parent {
17            display: flex;
18            align-items: center;
19        }
20
21        .right {
22            margin-left: auto;
23        }
24    </style>
25</head>
26<body>
27<div class="parent">
28    <div class="left">
29        <p>
30            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
31        </p>
32    </div>
33    <div class="right">
34        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=new1.jpg" alt="">
35        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=new2.jpg" alt="">
36        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=new3.jpg" alt="">
37    </div>
38</div>
39</body>
40</html>

投稿2017/06/07 13:43

s8_chu

総合スコア14731

わたくしなら以下のように

HTML
1<div id="box">
2  <ul>
3    <li><img><li>
4    <li><img><li>
5    <li><img><li>
6  </ul>
7  <p></p>
8</div>

CSS
1#box ul {
2  float:right;
3  padding-left:10px;/* テキストとのマージン */
4  list-style-type:none;
5}
6#box ul li {
7  padding-bottom:10px;/* 画像間のマージン */
8}
9#box p {
10  float:left;
11}

他にも、flex使うなどあります。

投稿2017/06/07 12:58

編集2017/06/07 13:01

LibertyBell3

総合スコア1084

nantarutia

2017/06/07 13:17

ありがとうございます！試してみたのですが画像が潰れて表示されてしまいました。。もうちょっと考えて見ます！

LibertyBell3

2017/06/07 13:23

つぶれる？どんなことになっているのだろう…

nantarutia

2017/06/07 13:28

1枚目2枚目の画像は正常に出てはいるのですが、 3枚目だけ画像の高さがおかしくなってしまいました、うーん、、、書き方の問題なのかなぁ。。。

LibertyBell3

2017/06/07 13:33

高さの指定をしていませんか？わたくしの例だと、div or ul に

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

んー、こうかな

<html>
<head>
    <style>
        body{
            width: 100%;
        }

        image{
            float: right;
        }

        p{
            float: left;
        }
    </style>
</head>
<body>
<img src="new1.jpg" alt="">
<img src="new2.jpg" alt="">
<img src="new3.jpg" alt="">

<p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</body>
</html>

投稿2017/06/07 12:24