###前提・実現したいこと
画像の下にテーブルが来てしまう。
画像とテーブルの間に30px隙間を空けて配置したい。
###発生している問題・エラーメッセージ
エラーは特に発生していない。
###該当のソースコード
htmlには
<html lang="ja"> <head> <meta charset="UTF-8"> <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <link rel="stylesheet" href="{% static 'accounts/results.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="results.jpg" width="500px" height="300px" alt="SEE"> </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> <div class="table-padding"> <table border="0 " class="table table-bordered "> <thead> <tr> <th class="index " colspan="4 " bgcolor=pink>ITEMS</th> </tr> </thead> <tbody> <tr> <td bgcolor="#FFEEFF " rowspan="2" align="center ">XOXO1</td> <td align="center "> <a class="kenshin_index" href="results1">XOXO2</a> </td> <td bgcolor="#FFEEFF " rowspan="4" align="center ">XOXO3</td> <td align="center "> <a class="kenshin_index" href="results2">XOXO4</a> </td> </tr> </tbody> </table> </div> </div> <div class="col-xs-4 float-right"> <div class="advertisement"> <div class="flex-item"><a href="https://wwwwwwwwwwwwwwwww" target="_blank" rel="nofollow"> <img border="0" width="250" height="250" alt="" src="https://wwwgggggggggggg"></a> <img border="0" width="1" height="1" src="https://www1rrrrrrrrrrrrrr" alt=""></div> </div> <div class="advertisement"> <div class="flex-item"><a href="https://wwwwwwwwwww" target="_blank" rel="nofollow"> <img border="0" width="350" height="240" alt="" src="https://wwdddddddddddd"></a> <img border="0" width="1" height="1" src="https://www18.a8.net/0.gif?a8mat=2TTE94+FMMNG2+3JGM+5ZU29" alt=""></div> </div> <div class="advertisement"> <div class="flex-item"><a href="https://aaaaaaaaaaaaaa" target="_blank" rel="nofollow"> <img border="0" width="300" height="250" alt="" src="https://wwweeeeeeeeeeeeeeee"></a> <img border="0" width="1" height="1" src="https://wwwqqqqqqqqqqqqqqqqq" 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; } .clearfix::after { content: ""; clear: both; display: block; } .top-menu { float: right; width: 30%; line-height: 30px; width:800px; } .top-menu-item{ list-style: none; font-size: 17px; } .top-menu-item a{ color: white; } .btn btn-primary btn-lg { background-color: black; } .heading { padding-left: 100px; display: inline-block; } .absolute-fill { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .vertical-center-container { display: flex; flex-direction: column; justify-content: center; } .image img{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .table { margin-top: 100px; } .index { height: 50px; font-size: 25px; text-align: center; } .absolute-fill { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .detailimg{ margin:30px 0px; } .img_title { color: white; font-size: 25px; padding: 0px 20px; font-weight: bold; } .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; } .flex-item{ flex-flow: column nowrap; margin: 20px 30px; } .advertisement:last-of-type{ margin-bottom:50px; } footer{ height: 50px; width: 100%; background-color: black; position:absolute; bottom:0; } .footers{ background-color: black; position:absolute; bottom:0; } .relative { position: relative; } .bottom-menu-item{ list-style: none; font-size: 15px; } .bottom_index { color: white; padding-left: 30px; }
と書いた。
###試したこと
marginの大きさを大きくしたりしたが移動しなかった。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。