Q&A
画像を横並びにしたいが、画面を縮小すると下に画像が潜ってしまう
お世話になります。
トップの画像とロゴ画像を横並びで表示したいのですが、
画面を最大化しているときは、問題ないのですが縮小すると
Logoが下に潜ってしまいます。
画像位置が変わらないようにしたいのですが、改善点をご教示頂けますでしょうか。
よろしくお願いいたします。
html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>PORTAL</title> 7 <link rel="stylesheet" href="file/top.css"> </head> 8 9 <body> 10 <div style="float: left; margin: 20px; display: flexbox;"> 11 <img src="file/top.jpg" alt="top" class="Photo1"> 12 </div> 13 <div style="float:left;margin:20px;display:flexbox;display: inline-block"> 14 <img src="file/Logo.png" alt="top2" class="Photo2"> 15 </div> 16 <p class="New"> 17 New! 18 </p> 19 </body> 20 21</html>
回答3件
0
ベストアンサー
divに直接style属性で書かずに、外部CSSにリンクすべき、、とかそういう話は一旦おいといて、
「ボックスを横並びにする」効果のあるプロバティ（float、display:flex、display:inline-block）の
根本的な使い方が全然理解できてないですね。
まずdisplay:flexboxは古い仕様の構文なのでdisplay:flexと記述すべきですし、
display:flexとfloat:leftとdisplay:inline-blockは共存できません。
横並びのレイアウトを作るのに、floatなのかdisplay:flexなのかinline-blockなのか、
どの手法を使うのかまず選択してください。ロゴと画像を横並びにしたいだけなら、
基本的にどの手法でも実現できます。
その上で、それぞれの手法でブロックを横並びにする仕組みを勉強しましょう。
インターネットで検索すればいくらでも事例解説はでてきます。
--追記--
ちなみに、画面幅は変わる前提の可変レイアウトを想定しているかと思うので、
以下のコードで画像サイズを親要素のサイズ合わせて伸縮可能に設定しとかないと、
画面幅を狭くした時に思ったようにレイアウトされないと思います。
そちらの設定も忘れずに。
CSS
1img { 2 max-width: 100%; 3 height: auto; 4}
投稿2018/07/26 06:02
編集2018/07/26 06:07
総合スコア3763
0
CSSの設定が原因です。
2つのdivがfloatされているだけなので、画面幅が2つのdivより大きければ横に並びますが、小さければ後述のLogo側は回り込み（下側に移動）ます。
他の回答にあるようにCSSを見直されるのが良いかと思います。
投稿2018/07/29 20:35
総合スコア3523
0
このような感じでしょうか、画像を横並びにしただけですが。
HTML
1<!DOCTYPE HTML"> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>PORTAL</title> 7 <link rel="stylesheet" href="./top.css"> </head> 8 9 <body> 10 <div class="images"> 11 <img src="file/top.jpg" alt="top"> 12 <img src="file/Logo.png" alt="top2"> 13 </div> 14 </body> 15</html>
css
1html,body{ 2 padding: 0; 3 margin: 0; 4} 5 6.images{ 7 display: flex; 8}
index.htmlを同じ場所に文字コードをURF-8にしてtop.cssを作ってください。
また本来はindex.cssを言う名前が妥当だと思います。
投稿2018/07/28 15:47
総合スコア46
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。