サイト作成の勉強中です。
上部固定、下部固定(内容に関わらずページ最下部に表示する)のレイアウトは出来たのですが、最下部の中にあるimgを右寄せにできません。
どのようにしたら出来るのでしょうか?
アドバイスのほどよろしくお願い致します。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Scan</title> 8 <meta http-equiv="Content-Style-Type" content="text/css"> 9 <link rel="stylesheet" href="css/styles.css"> 10</head> 11<body> 12<header> 13 <img src="../../img/home.png" id="home" onclick="location.href='../index.php'"> 14</header> 15<main> 16 <video id="video" muted="muted" autoplay playsinline></video> 17</main> 18<footer> 19 <div class="imgbox"> 20 <img src="../../img/shutter.png" id="shutter"> 21 </div> 22</footer> 23</body> 24<script src="js/main.js"></script> 25</html>
CSS
1body { 2 font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 3 margin: 0; 4} 5header { 6 height: 48px; 7 position: absolute; 8 top: 0; 9} 10#home { 11 margin: 0; 12 padding: 8px; 13 cursor: pointer; 14 width: 32px; 15 height: 32px; 16} 17footer { 18 height: 48px; 19 position: absolute; 20 bottom: 0; 21} 22#shutter { 23 padding: 8px; 24 cursor: pointer; 25 width: 32px; 26 height: 32px; 27 text-align: right; 28} 29.imgbox { 30 display: flex; 31 justify-content: flex-end; 32 }
.imgbox {
margin: 0 0 0 auto;
}
でもダメでした。
回答1件
あなたの回答
tips
プレビュー