###前提・実現したいこと
footerと3番目の<div class="advertisement">で囲んだ間の要素に隙間を空けたいが、今ぴったりくっついている。
###発生している問題・エラーメッセージ
特にエラーは発生していない。
###該当のソースコード
htmlには
<html lang="ja"> <head> <meta charset="UTF-8"> <link href="/static/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="detail.css"> <link rel="stylesheet" href="/static/bootflat/css/bootflat.min.css"> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <title>WEB SITE</title> </head> <body class="relative"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="/static/accounts/header.css"> <header class="clearfix"> <h1 class="title">WEB SITE</h1> <ul class="top-menu"> <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i></li> <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i></li> <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head" href="know">KNOW</a></i></li> </ul> <a class="logout_button" href="logout_view">LOGOUT</a> </header> <main> <div class="container"> <div class="detailimg col-xs-8"> <div class="relative_ele"> <div class="image"> <img class="absolute-fill" src="detail.jpg" width="500px" height="300px" alt="詳細" /> </div> <div class="absolute-fill vertical-center-container"> <p class="hthree">I LOVE YOU</p> <p class="hthree_small">I MISS YOU</p> </div> </div> <a class="button-primary" href="like">LIKE</a> <a class="button-primary" href="love">LOVE</a> <a class="button-primary" href="miss">MISS</a> <a class="button-primary" href="wantt">WANT</a> </div> <div class="col-xs-4 float-right"> <div class="advertisement"> <div class="flex-item"><a href="https://wwwwwwwwwwww" target="_blank" rel="nofollow"> <img border="0" width="250" height="250" alt="" src="https://yyyyyyyyyyyy"></a> <img border="0" width="1" height="1" src="https://wwwxxxxxxxxxxxxxxx" alt=""></div> </div> <div class="advertisement"> <div class="flex-item"><a href="https://aaaaaaaaaaa" target="_blank" rel="nofollow"> <img border="0" width="350" height="240" alt="" src="https://rrrrrrrrr"></a> <img border="0" width="1" height="1" src="https://wwwqqqqqqqqqqqqq" alt=""></div> </div> <div class="advertisement"> <div class="flex-item"><a href="https://zzzzzzzzz" target="_blank" rel="nofollow"> <img border="0" width="300" height="250" alt="" src="https://www2vvvvvvvvvvv"></a> <img border="0" width="1" height="1" src="https://wwwmmmmmmmmmmmmm" alt=""></div> </div> </div> </div> </main> <footer> <div class="footers"> <ul class="bottom-menu"> <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li> </ul> </div> </footer> </body> </html>
cssには
* { margin: 0; padding: 0; } main, ul{ display: flex; } .flex-item { width: 100%; } .half-width { width: 50%; } .title { color: white; font-size: 70px; align-self: center; } .top-menu-item{ list-style: none; font-size: 17px; } .detailimg { margin: 30px 0px; } .col-xs-8 { width: calc(66.66666667% - 60px); } .image img{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .white-letter { color: white; } .right-position { width: 100%; } .float-right { float: right; } .btn btn-primary btn-lg { background-color: black; } .outer { display: flex; justify-content: center; align-items: center; } .advertisement{ display: flex; align-items: flex-start; } .flex-item{ flex-flow: column nowrap; margin: 20px 30px; } .small_img { margin: 40px 0; } .relative_ele{ position: relative; height:300px } .absolute-fill { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .vertical-center-container { display: flex; flex-direction: column; justify-content: space-around; } .hthree { color: white; font-size: 30px; padding-top:70px; padding-left:8px; font-weight: bold; } .hthree_small { color: white; font-size: 20px; padding-left:30px; margin-top:0px; margin-left:0px; } .button-primary { display: inline-block; width: 300px; height: 45px; font-size: 20px; background-color: black; color: white; text-align: center; padding: 5px 0px; margin: 10px 0px; border-radius: 6px; } footer{ height: 50px; width: 100%; background-color: blue; position:absolute; bottom:0; margin-top:20px; } .footers{ background-color: blue; position:absolute; bottom:0; } .relative { position: relative; } .bottom-menu-item{ list-style: none; font-size: 15px; } .bottom_index { color: white; padding-left: 30px; }
と書いた。
###試したこと
clearfixが悪いのかと思ったが検証方法がわからない。
cssのflex-itemのmarginの大きさを大きくするとfooterとdivで囲んだ間の要素に隙間を空くが、3つのadvertisementの間の隙間も空いてしまい理想のスタイルにならない。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/15 07:51
2017/10/15 07:59 編集