文字の横に文字が入力される現象

Question

HTML↓

<div class="deitora">
    <h1>デイトラとは</h1>
    </div>
    
    <div class=top>
    <div class="top-img">
       <img src="/Users/haruki/デイトラ/img/about.png" width="50%">
    </div>

    <div class="top-text">
        <p>デイトラとは、無料で、迷わず、楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身につきます。<br>1日1題30日でプロのwebエンジニアを目指しましょう！</p>   
    </div>
    </div>

    
    <h1 class="coures">コース一覧</h1>
    
    <ul class="list-img">
        <li><img src="/Users/haruki/デイトラ/img/blue.png"></li>
        <li><img src="/Users/haruki/デイトラ/img/green.png"></li>
        <li><img src="/Users/haruki/デイトラ/img/pink.png"></li>
    </ul>

CSS　↓

.deitora {
	padding-top: 50px;
	text-align: center;
	padding-bottom: 30px;
}

.top {
	margin: 0 auto;
	width:  1000px;

}

.top-img img {
	float: left;
	padding-right: 10px;
}

.top-text {
	float: left;
	padding-left: 10px;
}

.list-img {
    display: flex;
}

コース一覧の文字がなぜか<p>タグで囲まれているデイトラとは〜の文章の横にきます。
真下に表示させるにはどうしたらいいですか？

Comments

[glyzinieh]

コードが分かりにくいので、「コードの挿入」を押して分かりやすくしてください。よろしくお願いします。

[rara0210]

すみません！編集しました

Answer 1

コース一覧の文字がなぜか<p>タグで囲まれているデイトラとは〜の文章の横にきます。

あなたが、top-textクラスのdiv要素に「float: left;」を指定しているからです。

真下に表示させるにはどうしたらいいですか？

h1要素のスタイルに「clear: left;」を指定してください。

おすすめは、floatレイアウト(floatやclearの指定)をすべてやめ、topクラスのスタイルに「display: flex;」を設定することです。

Comments

[rara0210]

ありがとうございました！解決しました！
が、top-imgクラスの画像とtop-textのpタグの間に無駄な余白ができてしまいました。。。
何か解決する方法はありますでしょうか？

[rara0210]

クラスなどを整理していたら直りました！ありがとうございました！