divクラスを横並びにしたい

html cssを使用して3個の異なるDivクラスを横並びにしようと思います。
最終的には3個のDivクラスを画像テキストを横並びにしたいです。ですが上手くいきません。
float等を使用してみましたが無理でした。
分かる方よろしくお願いします。
コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <img src="画像" alt="画像1">
        <p>1</p>
    </div>
    <div class="second">
        <img src="画像" alt="画像2">
        <p>2</p>
    </div>
    <div class="third">
        <img src="画像" alt="画像3">
        <p>3</p>
    </div>
</body>
</html>

kai0310

2020/11/14 13:19

自身で試した内容を記載してください。 (参考: https://teratail.com/help/question-tips#questionTips1-2 > divの1のクラスと2のクラスを画像と文字を横に並べたいです。日本語として合っているでしょうか？プログラミングは自分で命令した様にしか動作しません。もし、そこが細かいことだと思うのであれば、この先もっと苦労されることと思います。文章で実現したい内容を記載することが難しいのであれば図なども画像としてアップロードできまので合わせて確認してみてください。

yambejp

2020/11/14 14:18

クラス名をまともなものに変えてください。具体的にこのソースからどういう配置にしたいか手書きでいいので図示すると回答が付きやすいと思います

HENJIN

2020/11/15 08:29

申し訳ございません。こちら側が質問しているのに多大なる失礼な行動をした事をまず心からお詫び申し上げます。只今修正致します。

sleepsheep

2020/11/15 13:17 編集

"最終的には3個のDivクラスを画像テキストを横並びにしたいです。" この日本語では意図が明確にならないのですが、結局、divとその中のimgとpをどのような並びで表示したいのですか？画像でもいいので示してください。また、試したCSSも記載してください。

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

回答2件

floatで横並びさせるなら、適切な場所で解除する(clear)必要があります。

css
1.div1, .div2 {
2  float:left;
3}
4.div3 {
5  clear: left;
6}

CodePenサンプル

floatは横並びのためのプロパティではなく回り込みを指定するものですので、後の要素のレイアウトに影響を与えます。今回のようなシンプルな構成ならいいですが、複雑な構成になるといろいろ複雑になりますので、今なら、他にいい方法がいろいろありますので、それを検討された方がいいでしょう。

display: table-cell;を使ったサンプル。
CodePenサンプル

FlexBox を使ったサンプル
CodePenサンプル

投稿2020/11/15 01:56

hatena19

総合スコア34084

cssでfloat:leftを指定すればよいのでは？

投稿2020/11/14 12:42

sleepsheep

総合スコア310

HENJIN

2020/11/14 12:48

すみません。間違っている内容がありました。コードをもう一度確認して頂くと幸いです。 float:leftにしてしまうと、レイアウトが崩れます。

sleepsheep

2020/11/14 12:57

クラス名の先頭に数字は使えなかったと思います。クラス名を変更したうえで、1つ目のdivにつけたクラス名に対してfloat:leftを指定したらどうなりますか？

HENJIN

2020/11/14 13:17

駄目ですね、、、 3個目のレイアウトが崩れてしまいます。

miyabi_pudding

2020/11/14 13:43

floatではなく、 flexを勧めるべきでは？ IE11からも使用が可能なので、 floatの扱いづらさを考えると、初学者に勧めるべき物ではありません。

sleepsheep

2020/11/14 14:04

質問の記述から画像と文字を含んだ1つ目のdivと2つ目のdivを横に並べたいということだと受け取ったのですが、以下のような表示とは違うのですか？ https://jsfiddle.net/qzturv4n/

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

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

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

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

divクラスを横並びにしたい

関連した質問