Q&A
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="style.css"> 6 <title>Document</title> 7</head> 8<body> 9 <div class="oneokrock"> 10 <div class="taka"> 11 <p><img src="images/taka.jpg" alt="Taka画像" width="400px" height="400px"></p> 12 </div> 13 <div class="ta"> 14 <p class="mori"><strong>Taka</strong></p> 15 <p>森内貴寛</p><br> 16 <p>Birth Date:1988/04/17<br> 17 Birth Place:東京都<br> 18 Height:168cm<br> 19 Blood Type:A型<br><br> 20 ONE OK ROCKのボーカル。<br> 21 松濤幼稚園、慶應義塾幼稚舎、<br> 22 慶應義塾湘南藤沢中等部を経て、<br> 23 慶應義塾湘南藤沢高等部中退。株式会社10969所属。<br> 24 歌手の森進一と、同じく歌手の森昌子の長男である。<br> 25 弟(三男)はロックバンド・MY FIRST STORYのHiro。<br> 26 元ジャニーズ事務所・アミューズ所属。NEWSの元メンバーである。 27 28 </p> 29 </div> 30</div> 31<div class="box"></div> 32</body> 33</html>
CSS
1* { 2 margin: 0; 3 padding: 0; 4} 5 6body { 7 background-color: black; 8} 9 10.oneokrock { 11 background-color: turquoise; 12 width: 960px; 13} 14 15.oneokrock .taka { 16 float: left; 17 margin-top: 30px; 18 margin-left: 20px; 19} 20 21.oneokrock .ta { 22 float: right; 23 margin-top: 30px; 24 width: 500px; 25} 26 27.ta strong { 28 color: white; 29 font-size: 40px; 30} 31 32.ta .mori { 33 margin: 0; 34} 35 36.ta > p { 37 color: white; 38} 39 40.box { 41 width: 50px; 42 height: 50px; 43 background-color: pink; 44}
上のコードをブラウザで表示すると下記のようになります。
boxクラス(ピンクの部分)が左上に来ているのですがこれはどうして左上になるのでしょうか？
また画像の下にこのboxクラスを持っていきたいのですがどうすればよろしいでしょうか？
回答1件
0
ベストアンサー
.oneokrockの内容物がすべてフロートしているため、内容物がなくなって、高さを失っているのが原因です。
伝統的にはclearfixで解決しますが、CSS3的にはブロック整形コンテキストを生成するのがスマートです。
いろいろな方法がありますが、たとえば以下を追加してみてください。
css
1.oneokrock { 2 display: flow-root; 3}
ただ、フロートで横並びにするレイアウト手法は、10年ぐらい時代遅れです。いろいろな制約にも悩まされやすいので、2021年現在で使う人はあまりいないと思います。
フレックスレイアウトを検討してみてください。
投稿2021/08/05 06:59
総合スコア36163
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。