今、cssでサンプルページをコーディングしている所なのですが
floatを使用した時に最後に回り込ませたブロックの横幅を画面いっぱいに指定しますと
その、ブロックがすでにあるブロックの下に回り込んだ状態で、画面いっぱいに表示されます。
具体的に言うと
まず、became gamersのブロックを上揃いの左側めいっぱいによせます。
次に、became gamersのブロックの右側にhomeブロックを回り込ませます。
今度は、homeブロックの右側に、menuブロックを回り込ませます。
そして、最後にmenuブロックの右側に、お問い合わせブロックを回り込ませて
お問い合わせブロックの横幅を画面いっぱいに表示させようとして
width:100%;を指定しました。
ですが、お問い合わせブロックが、became gamers、home、menu、ブロックの下に回り込んできて
その状態で横幅が画面いっぱいに表示されてしまいました。
ではなく、menuブロックの右横に回り込ませてその状態で、お問い合わせブロックを画面いっぱいに
表示させたいと思っています。
コーディングは次のように行いました。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf8"> 5 <title>sample</title> 6 </head> 7 <body> 8 <header> 9 <h1 class="nume1">BECAME GAMERS</h1> 10 <p class="nume1">HoMe</p> 11 <p class="nume1">MeNu</p> 12 <p class="nume1 nume2">お問い合わせ</p> 13 </header> 14 <section> 15 <h1 class="nume3">話題の超人気ゲームのマニアックな最新情報をいち早くお届け!</h1> 16 <h2>カテゴリ</h2> 17 </seciton> 18 <section> 19 <h1>ACTION</h1> 20 <p>ナルティメットストーム 4</p> 21 <h1>RPG</h1> 22 <p>DARK SOULS III</p> 23 <h1>FPS</h1> 24 <p>FAR CRY PRIMLE</p> 25 <h1>RACE</h1> 26 <p>NEED FOR SPEED UNDER COVER 2</p> 27 </section> 28 </body> 29</html>
CSS
1 <style> 2 body{ 3 margin:0; 4 text-align:center; 5 } 6 header{ 7 text-align:left; 8 } 9 .nume1{ 10 background-color:black; 11 color:white; 12 border-left-style:solid; 13 border-left-color:gold; 14 width:16.5%; 15 height:200px; 16 margin-top:-25px; 17 display:flex; 18 align-items:center; 19 float:left; 20 } 21 .nume2{ 22 width:100%; 23 } 24 .nume3{ 25 clear:both; 26 } 27 </style>
どなたか、解決策をご教示お願い出来ないでしょうか??
宜しくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。