Q&A
float をレイアウトに使うこと自体が間違いです。flex を使いましょう。
Ctrl＋マウスホイールで縮小するとfloatで横並びにした部分が改行される
htmlcssでfloatで<div>要素を３つ左寄せ横並びにしたのですが、Ctrl＋マウスホイールで縮小すると要素が改行されてレイアウトが崩れてしまいます。
親要素の幅は500px、横並びの要素は左から幅は125px,200px,125px、マージンは5px,10px,5px、パディングは全て０なので計算上はみ出ませんし
全てpxだけで指定しているので、縮小によってはみ出るのも不思議です。
発生している問題・エラーメッセージ
該当のソースコード
htmlcss
1<div style="width: 500px;"> 2 <div style="float: left; width: 125px; margin: 5px"></div> 3 <div style="float: left; width: 200px; margin: 10px"></div> 4 <div style="float: left; width: 125px; margin: 5px"></div> 5</div>
試したこと
横並びにした要素の幅を小さくすると、縮小50%で崩れていたのが33%まで耐えるようになりました。
補足情報（FW/ツールのバージョンなど）
sublime test 3で書いてます。
上記のソースコードはコピペではないので参考程度でお願いします。
回答1件
0
ベストアンサー
float の本来の用途は、画像の周りに文字を回りこませることです。古いブラウザをサポートするためにレイアウト用途で float を使う必要は、もうほとんどなくなってきたと思います。
参考: floatはオワコンなのか | ザリガニデザインオフィス
かわりに flex を使いましょう。詳しい使い方は、たとえば以下の記事をどうぞ。
参考: 【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり) | creive【クリーブ】
参考: もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends
また、最近では grid というのも使われるようになってきたようです。純粋にグリッドを作る目的であれば、こちらの方が良いかもしれません。
参考: CSS Grid の使い方をマスターして float を卒業しよう | 株式会社WEB企画
投稿2020/03/22 19:13
総合スコア7901
回答ありがとうございます。
初心者向けの講座でよく
「横並びにするときはfloat」と紹介されていますが実際はあまり使わないのですね。
あのあとflexを使うとうまくいきました。
あなたの回答
tips
プレビュー
