Q&A
現在html、cssでページ作成しているのですが、画面サイズを小さくするとレイアウトが下記のようにレイアウトが崩れてしまいます。
ちなみに、デフォルトサイズですと下のようにしっかりと収まります。
ページを縮小した際に元のレイアウトを保持することは可能なのでしょうか？
一部コードを載せておきます。
wrapperがtodays'pasutaとnewsを大枠で包んでいます。
subがtodays'pasuta、newがnewsの包みです。
/*-----------wrapper---------------*/ #wrapper{ float:left; margin-top:20px; } #sub{ width:500px; overflow:hidden; border:1px solid #EEEAE0; box-sizing:border-box; } #sub>.todayimg{ margin: 20px 45px 20px 0px; float:right; } #sub .pesuca{ float:left; } #sub .pesuca:hover{ opacity:0.5; } #sub p{ float:right; font-weight: bold; text-shadow:10px; } #sub p:first-of-type{ margin:0 50px 10px 0; } /*---------new------------*/ #new{ width:500px; height:128px; background:url(img/back.jpg); margin-top:30px; padding:15px; border:1px solid #EEEAE0; box-sizing:border-box; } #new .news{ margin:0 0 20px 200px; } #new dt{ float:left; } #new dd{ margin-bottom:10px; }
あと、全体大枠にcontainerをもたせています。
おそらくこのheigthが関係してるのかなと思いますが、適当にいじってみてもうまくいきません。
containerに高さ指定をしないで、それぞれのidに高さを持たせればうまくいくと思ったのですが、これもダメでした。
お手上げ状態なので、わかる方いましたらよろしくお願いしますよろしくお願いします。
/*-----------container-------------*/ #container{ width:980px; height:1200px; margin:0 auto; background-color:#fff; }
回答3件
0
要素の大きさを画面サイズに合わせて変化させるためには通常、数値をpxではなくて%で指定するのではないかと思います。
今回は
CSS
1#container
でwidth:980px;を指定しているため、画面サイズを小さくしたときに要素が可変にならなかったのかなあと思いました(それ以外にもいくつかありそうだけど)。
で、それを確認したうえで質問者さんのご希望の動作はこんな感じでできるのではないかと思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 img { 13 max-width: 100%; 14 height: auto; 15 } 16 17 .wrapper::after { 18 clear: both; 19 display: block; 20 content: ''; 21 } 22 23 .sub { 24 float: left; 25 width: 50%; 26 background-color: aqua; 27 } 28 29 .side { 30 float: right; 31 width: 50%; 32 background-color: firebrick; 33 height: 550px; 34 } 35 36 .new { 37 background-color: gold; 38 } 39 </style> 40</head> 41<body> 42<div class="container"> 43 <div class="wrapper"> 44 <div class="sub"> 45 <p>あかさたな</p> 46 <img src="img/CxGC4ZnVIAAM3p2.jpg" alt="画像1"> 47 <div class="new"> 48 <p>あかさたな</p> 49 <img src="img/CxGC1pzUkAAMSld.jpg" alt="画像2"> 50 </div> 51 </div> 52 <div class="side"> 53 <p>はまやらわ</p> 54 </div> 55 56 </div> 57</div> 58</body> 59</html>
投稿2016/12/02 23:15
編集2016/12/02 23:22
退会済みユーザー
総合スコア0
0
「レスポンシブデザイン」で調べてみると勉強になるかと思います。
投稿2016/12/02 22:57
総合スコア248
0
要するにフッターが回り込んでしまうわけですね。
floatさせた要素の親要素にoverflow:hiddenを付けたらうまくかもしれません。
css
1#container { 2 ... 3 overflow:hidden; 4}
もしくは次の要素（footer）にclear:bothを付けてあげるか、ですね。
投稿2017/02/24 00:19
総合スコア251
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。