質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

2273閲覧

画像の下にテーブルが来てしまう

abc30

総合スコア36

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2017/10/15 11:16

###前提・実現したいこと
画像の下にテーブルが来てしまう。
画像とテーブルの間に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の大きさを大きくしたりしたが移動しなかった。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

以下のようにしてみてはいかがでしょうか?

HTML

1<html lang="ja"> 2 3<head> 4 <meta charset="UTF-8"> 5 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css"> 7 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 8 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 9 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 10 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 11 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script> 13 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.stepper.min.js"></script> 14 <title>WEB SITE</title> 15 <style type="text/css"> 16 * { 17 margin: 0; 18 padding: 0; 19 } 20 21 .clearfix::after { 22 content: ""; 23 clear: both; 24 display: block; 25 } 26 27 .top-menu { 28 float: right; 29 width: 30%; 30 line-height: 30px; 31 width: 800px; 32 } 33 34 .top-menu-item { 35 list-style: none; 36 font-size: 17px; 37 } 38 39 .top-menu-item a { 40 color: white; 41 } 42 43 .btn btn-primary btn-lg { 44 background-color: black; 45 } 46 47 .heading { 48 padding-left: 100px; 49 display: inline-block; 50 } 51 52 .absolute-fill { 53 position: absolute; 54 left: 0px; 55 right: 0px; 56 top: 0px; 57 bottom: 0px; 58 } 59 60 .vertical-center-container { 61 display: flex; 62 flex-direction: column; 63 justify-content: center; 64 } 65 66 .image img { 67 border-radius: 5px; 68 -webkit-border-radius: 5px; 69 -moz-border-radius: 5px; 70 z-index: -1; 71 } 72 73 .table { 74 margin-top: 30px; 75 } 76 77 .index { 78 height: 50px; 79 font-size: 25px; 80 text-align: center; 81 } 82 83 .absolute-fill { 84 position: absolute; 85 left: 0px; 86 right: 0px; 87 top: 0px; 88 bottom: 0px; 89 } 90 91 .detailimg { 92 margin: 30px 0px; 93 } 94 95 .img_title { 96 color: white; 97 font-size: 25px; 98 padding: 0px 20px; 99 font-weight: bold; 100 } 101 102 .hthree { 103 color: white; 104 font-size: 30px; 105 padding-top: 70px; 106 padding-left: 8px; 107 font-weight: bold; 108 } 109 110 .hthree_small { 111 color: white; 112 font-size: 20px; 113 padding-left: 30px; 114 margin-top: 0px; 115 margin-left: 0px; 116 } 117 118 .flex-item { 119 flex-flow: column nowrap; 120 margin: 20px 30px; 121 } 122 123 .advertisement:last-of-type { 124 margin-bottom: 50px; 125 } 126 127 footer { 128 height: 50px; 129 width: 100%; 130 background-color: black; 131 position: absolute; 132 bottom: 0; 133 } 134 135 .footers { 136 background-color: black; 137 position: absolute; 138 bottom: 0; 139 } 140 141 .relative { 142 position: relative; 143 } 144 145 .bottom-menu-item { 146 list-style: none; 147 font-size: 15px; 148 } 149 150 .bottom_index { 151 color: white; 152 padding-left: 30px; 153 } 154 </style> 155</head> 156 157<body class="relative"> 158<header class="clearfix"> 159 <h1 class="title">WEB SITE</h1> 160 <ul class="top-menu"> 161 <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i> 162 </li> 163 <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i> 164 </li> 165 <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head" 166 href="know">KNOW</a></i></li> 167 </ul> 168 <a class="logout_button" href="logout_view">LOGOUT</a> 169</header> 170 171<main> 172 <div class="container"> 173 <div class="detailimg col-xs-8"> 174 <div class="relative_ele"> 175 <div class="image"> 176 <img class="absolute-fill" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=results.jpg" 177 width="500px" height="300px" alt="SEE"> 178 </div> 179 <div class="vertical-center-container "> 180 <p class="hthree">I LOVE YOU</p> 181 <p class="hthree_small">I MISS YOU</p> 182 </div> 183 </div> 184 <div class="table-padding"> 185 <table border="0 " class="table table-bordered "> 186 <thead> 187 <tr> 188 <th class="index " colspan="4 " bgcolor=pink>ITEMS</th> 189 </tr> 190 </thead> 191 <tbody> 192 <tr> 193 <td bgcolor="#FFEEFF " rowspan="2" align="center ">XOXO1</td> 194 <td align="center "> 195 <a class="kenshin_index" href="results1">XOXO2</a> 196 </td> 197 198 <td bgcolor="#FFEEFF " rowspan="4" align="center ">XOXO3</td> 199 <td align="center "> 200 <a class="kenshin_index" href="results2">XOXO4</a> 201 </td> 202 </tr> 203 204 </tbody> 205 </table> 206 </div> 207 </div> 208 209 <div class="col-xs-4 float-right"> 210 211 <div class="advertisement"> 212 <div class="flex-item"><a href="https://wwwwwwwwwwwwwwwww" target="_blank" rel="nofollow"> 213 <img border="0" width="250" height="250" alt="" 214 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwwgggggggggggg"></a> 215 <img border="0" width="1" height="1" 216 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://www1rrrrrrrrrrrrrr" alt=""> 217 </div> 218 </div> 219 220 <div class="advertisement"> 221 <div class="flex-item"><a href="https://wwwwwwwwwww" target="_blank" rel="nofollow"> 222 <img border="0" width="350" height="240" alt="" 223 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwdddddddddddd"></a> 224 <img border="0" width="1" height="1" 225 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://www18.a8.net/0.gif?a8mat=2TTE94+FMMNG2+3JGM+5ZU29" 226 alt=""></div> 227 </div> 228 229 <div class="advertisement"> 230 <div class="flex-item"><a href="https://aaaaaaaaaaaaaa" target="_blank" rel="nofollow"> 231 <img border="0" width="300" height="250" alt="" 232 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwweeeeeeeeeeeeeeee"></a> 233 <img border="0" width="1" height="1" 234 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwwqqqqqqqqqqqqqqqqq" alt=""> 235 </div> 236 </div> 237 </div> 238 </div> 239</main> 240<footer> 241 <div class="footers"> 242 <ul class="bottom-menu"> 243 <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li> 244 </ul> 245 </div> 246</footer> 247 248</body> 249 250</html>

投稿2017/10/15 11:36

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問