実現したいこと
この様な写真の配置にしたいです。
発生している問題・分からないこと
画面縮小してもbox2を常に中央に来るようにしたいのですが出来ません
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>marginとpadding</title> 6<link rel="stylesheet" type="text/css" href="base.css"> 7</head> 8<body> 9 <div id="box1"> 10 <p>box1</p> 11 </div><!-- box1 --> 12 <div id="box2"> 13 <p>box2</p> 14 </div><!-- box2 --> 15</body> 16</html> 17
CSS
1#box1 {2 width: 500px;3 height: 300px;4 background-color: #f00;5 margin: 50px 0 0 50px ;6 padding: 30px;7 position: relative;8}9 10#box2 {11 width: 500px;12 height: 300px;13 background-color: #00f;14 margin: 0 auto;15 padding: 50px;16 position: fixed;17 top: 350px;18 left: 650px;19}
試したこと・調べたこと
上記の詳細・結果
配置は写真のようになったのですが画面縮小したら中央に来なくなってしまいます。
補足
赤がbox1 青がbox2です。
0 コメント