画像が横並びにならない

画像を横並びにしようとしてもなりません。どうすれば横並びになるのか教えていただけるとたすかります。

.test {
float: left;
}

.test {
display: flex;
justify-content: center;
}

退会済みユーザー

2018/12/01 05:42

すごい気になったんですが、imgタグのwidth属性に"px"っていう単位はいらないはずです。

yoshinavi

2018/12/01 06:39

提示コード以外の部分が絡まないと、提示の画像のように「縦並び」になりません。状況が再現するコードをご提示ください。

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

回答2件

コード丸コピペで確認したら
横並びになりますよ？

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>sample</title>
6    <style>
7      .test {
8        float: left;
9      }
10
11      .test {
12        display: flex;
13        justify-content: center;
14      }
15
16      span {
17        width: 300px;
18      }
19    </style>
20  </head>
21  <body>
22    <div class="test">
23      <img src="https://teratail.storage.googleapis.com/uploads/contributed_images/c081f3223ba305f08339f8358ae0f0fb.png" alt="クリスマス特集" width="300px"></a> <!-- ←これ不要 -->
24      <img src="https://teratail.storage.googleapis.com/uploads/contributed_images/c081f3223ba305f08339f8358ae0f0fb.png" alt="クリスマス特集" width="300px"></div>
25  </body>
26</html>
27

あと、1つ目のimgの後に不要なaの閉じタグがあります

投稿2018/11/30 17:03

akihiro3

総合スコア955

ベストアンサー

実際に表示することができましたが考えられる原因としては
画面サイズが画像のまわりのmarginを引いた以上のサイズになることで改行されてしまっているかほかの部分のcssで状態が上書きされてしまっている等です.
画面サイズから溢れないようにするためにはmarginを変更して画像を含め画面サイズに収まるようにするかJavaScriptかcssのcalc()で要素のサイズを書き換えてやるような感じです.画面サイズが一様ではないでしょうからcssでmin-widthで最低サイズを設けサイズを書き換えてやることが主になることになると思います.

HTML
1<!-- htmlのみ -->
2<!DOCTYPE html>
3<html lang="ja">
4    <head>
5        <title></title>
6        <meta charset="utf-8">
7        <link rel="stylesheet" type="text/css" href="xxx.css">
8    </head>
9    <body>
10        <div class="test">
11            <img src="" alt="" width="300px">
12            <img src="" alt="" width="300px">
13        </div>
14    </body>
15</html>