前提・実現したいこと
レスポンシブデザインをしようと思ったのですが、<main>でくるんだ、div#new (silckを使ったスライダーの部分)と、img#pr は、max-widthが反映されるのですが、div#rankがどうにもこうにも下にカラム落ちしてしまいます。落ちずに<main>の部分をリキッドレイアウトにする方法を教えていただきたいです。
コードがとても汚いかと思うのですが、まだペーペーのため、ご容赦ください。
発生している問題・エラーメッセージ
chromeで検証して見ると999pxのところで、div#rankが下におち、ぽっかり空洞ができてしまう
さらに縮めると、div#newとimg#prは反映していたことがわかります。落ちてしまったdiv#rankも切れたりすることなく、反映されている。
該当のソースコード
**__HTML__** <head> <title>テキストテキストテキスト</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="slick/slick-theme.css" rel="stylesheet"> <link href="slick/slick.css" rel="stylesheet"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> </head> <body> <!------------------header--------------------------> <header> <div id="header_inner"> <nav> <ul> <li><a href="#">ログイン</a></li> <li><a href="#">無料会員登録</a></li> </ul> </nav> <!--<a><img href="#" src="0000000.png" alt="テキストテキストテキスト"></a>--> </div> </header> <!------------------main--------------------------> <main> <div id="wrapper"> <div id="new" > <h2>新着記事</h2> <a href="#"><img id="markimage" src="mark.png" alt="_"></a> <ul class="slider"> <li class="slide"> <a class="slide__link" href="#"> <img src="0000000.jpg" alt="image01"> <span class="slide__content-wrap"> <span class="slide__content"> <h2 class="slide__title">テキストテキストテキスト</h2> <p class="slide__text"> テキストテキストテキスト </p> </span> </span> </a> </li><!---以下繰り返し省略---> </ul> <img id="pr" src="0000.png" alt="PR"> </div><!--//#new--> <!------------------rank--------------------------> <div id="rank"> <h2>アクセスランキング</h2> <ul> <li> <dl> <dt><img src="0000000.jpg" alt="1"> <span class="rank_number">1</span></dt> <dd><p>テキストテキストテキスト</p><span class="day_access">2018/11/4 6000 view</span></dd> </dl> </li><!---以下繰り返し省略---> </ul> </div> <!---/#rank---> </div><!---/wrapper--> </main>
/* ======================================== リセットcss ========================================= */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline; color: #7d7676; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html{overflow-y: scroll;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;} input, textarea,{margin: 0; padding: 0;} ol, ul{list-style:none;} table{border-collapse: collapse; border-spacing:0;} caption, th{text-align: left;} a:focus {outline:none;} /* ======================================== 全体設定 ========================================= */ body { font-size: 14px; line-height: 1.4em; font-family: "メイリオ", "Meiryo", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color:#7d7676; text-decoration:none; } a:hover{ text-decoration: #82a8f7; } /* micro clearfix */ .cf:before, .cf:after { content: " "; display: table; } .cf:after {clear: both;} .cf {*zoom: 1;} /* ======================================== header ========================================= */ header{ height: 70px; width: 100%; margin-bottom: 44px; background:#fff;} div#header_inner{ width: 100%; max-width: 972px; height: 70px; line-height: 70px; background: url(00000.png) no-repeat center; margin-top: 20px; margin: 0 auto; } nav ul li a{ float: left; padding-right: 24px; color:white; font-weight: bold; display: block; } div#header_inner a img{ margin-left: 446px; padding-top: 25px; display: block; } /* ======================================== main ========================================= */ main{ width: 100%; height: auto; } div#wrapper { max-width: 972px; max-height: 610.2px; margin: 0 auto; padding-left:25.5px; padding-right: 25.5px; } #category_wrapper{ width: 972px; margin: 0 auto; } /* ======================================== main new ========================================= */ div#new{ width: 100%; max-width: 550px; height: auto; display: inline-block; color: #5b5757; font-size: 18px; position: relative; margin-bottom: 50px; } div#new h2{ font-weight: bold; } img#pr{ width: 100%; max-width: 500px; height: auto; margin-top: 50px; display: inline-block; } div#new img#markimage{ width:40px; height: 40px; position: absolute; top:60px; right: 70px; z-index: 2; } /* ======================================== main rank ========================================= */ div#rank{ width: 100%; max-width: 394px; display: inline-block; vertical-align: top; } div#rank h2{ font-size:16px; font-weight: bold; margin-bottom: 10px; } div#rank dl{ width: 100%; max-width: 394px; height:86px; position: relative; padding-top: 20px; } div#rank dl dt img{ width: 100%; max-width: 118px; height: 86px; float: left; padding-right: 10px; } dd p{ font-weight: bold; font-size: 15.5px; padding: 10px; } dd span.day_access{ position: absolute; right: 10px; top: 86px; font-weight: bold; font-size: 12px; } span.rank_number{ color: #fff; display: inline-block; background-color: #74AEF3; border-radius: 100%; width: 20px; height: 20px; position: absolute; top: 25px; left: 5px; text-align: center; line-height: 20px; } --------------------------------------------------------------------- **__別ファイルCSS__** /* Slider */ .slick-slider { position: relative; display: inline-block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; z-index: 1; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: inline-block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: inline-block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slider{ margin: 31px 0; width: 90%; } .slide{ position: relative; } .slide__link{ color: #fff; } .slide img{ height: auto; width: 100%; } .slide__content-wrap{ left: 35%; position: absolute; top: 75%; } .slide__content{ color: #fff; display: block; transform: translate(-50%,60%); transition: 0s; line-height: 30px; background-color: rgba(21, 19, 19, 0.39); } .slide__content.on{ opacity: 1; transform: translate(-50%,-50%); transition: .5s; } .slide__title{ font-size: 40px; line-height: 40px; color: #fff; } .slide__text{ color: #fff; } /*slick setting*/ .slick-prev:before, .slick-next:before{ color: #000; }
試したこと
floatでくむのはやめた
W3c Validationもつかったが特に問題はなさそう
ネットで色々みたが、うまくいかなかった。
mainのwidthに余分を持たせてみたがうまくいかなかった。
box-sizingも使ってみたが何も変わらず。。。むしろwrapperでセンターにしていたのが効かなくなってしまった。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/09 08:27
2018/11/09 09:10