@blue-phoenixposted at 2024-09-05

ｈｔｍｌのｆｌｏａｔについて

Q&A

Closed

ｈｔｍｌでコーディングをしている者です。
以下の画像で真ん中カラムを画像とする緑と青の中央に入れたいのですが入りません。

真ん中は黄色にしたはずも、色すら消えています。
ちなみに今回はdisplay: flex;を使わないものとします。
実はfloatを用いて黄色は画像ではなく文章とするので用いません。

ｈｔｍｌ

<div class = "left">左カラム</div>
<div class = "right">右カラム</div>
<div class = "middle">真ん中カラム</div>

ｃｓｓ

.left {
    background-color: chartreuse;
    height: 400px;
    width: 400px;
    float: left;
    }
.right {
    background-color: aqua;
    height: 400px;
    width: 400px;
    float: right;
    }
.middle {
    background-color: gold;
    height: 400px;
    width: 400px;
    }

後、floatとセットで使われるclearもありますが、これを使っても黄色は消えてしまいました。headerやfooterで分けろと言いたいところですが、
今回はfloatやclearでやりたいです。
不具合とかでなく正直、これらを完全に理解しきれていないと思います。
さすがに今回は難しくて自己解決には至れません。
どうすれば中央に入れられるか御教授お願いします。

2Answer

@suka-test posted at 2024-09-05

こういうのではダメでしょうか？　↓

<!DOCTYPE html>
<html lang="ja">
	<head>
        <style>
            .left {
                background-color: chartreuse;
                height: 400px;
                width: 400px;
                float: left;
            }
            .right {
                background-color: aqua;
                height: 400px;
                width: 400px;
                float: left;
            }
            .middle {
                background-color: gold;
                height: 400px;
                width: 400px;
                float: left;
            }
        </style>
	</head>
    <body>
        <div class = "left">左カラム</div>
        <div class = "middle">真ん中カラム</div>
        <div class = "right">右カラム</div>
    </body>
</html>

すべての class に float: left; を入れて、div の並びを変えています。

2Like

@blue-phoenix posted at 2024-09-05

モヘンジョギャオオオオン、できたああああああああああああああああ！！！
こんな・・・全部float設定にするなんて方法だとはああ！！　
あれ、最初はそうしたはずなのになぜかならなかったです。
それにｃｓｓじゃなくてstyle式でhtml内に入れ込むなんて、
なぜそれで中央に入るのですか？
どういう理由でstyleとかに入れるのか・・・想定できるわけないす(・ω・`)

1Like

Comments

@suka-test
あっ、style に入れるのは関係ないです。
1 ファイルにまとめた方が試しに html 書いて表示させるのに、めんどうが少ないのでそうしただけです。
同じ内容を css ファイルに分離しても結果は同じです。業務等で作成する場合は、よほど単純なものでなければ、分離する方が一般的だと思います。
ただ、その場合、リンク先をまちがえて「あれ、イメージ通り表示されない？」なんてこともあるといえばあります。お気をつけを。
@blue-phoenix
Questioner
そ、そうでしたか・・・ちょっとした凡ミスに気付かないってのもダメですね。
とにかく成功は成功という事で参考になりました、ありがとうございます。

Are you sure you want to delete the question?

ｈｔｍｌのｆｌｏａｔについて

2Answer

Comments

Your answer might help someone💌