Q&A
以下のようなレイアウトにしたいのですが、どうしてもうまくいきません。
コードは以下の通りです
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>練習用</title> 7 <link rel="stylesheet" href="/css/style.css"> 8</head> 9<body> 10 <div class="container"> 11 <div class="main_box"> 12 <div class="txt_box">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> 13 <div class="img_box"> 14 <img src="/img/600x400.jpg" alt="#"> 15 </div> 16 </div> 17 </div> 18</body> 19</html>
CSS
1@charset "UTF-8"; 2 3* { 4 padding: 0; 5 margin: 0; 6 box-sizing: border-box; 7} 8 9.container { 10 max-width: 1280px; 11 height: 10000px; 12 margin: 3vw auto; 13} 14 15.main_box { 16width: 80%; 17background-color: #efefef; 18padding: 3%; 19position: relative; 20} 21 22 23.txt_box { 24 width: 95%; 25} 26 27.img_box { 28 position: absolute; 29 top: 25%; 30 right: -25%; 31} 32 33.img { 34 display: block; 35 height: 50%; 36}
上記のコードで以下のように表示されます。
私の考えとしては、
メインボックス内にテキストボックスとイメージボックスを作り、高さ50%のイメージボックスをpositonプロパティでtopから25%で位置調整し、メインボックスの右辺でちょうど真ん中になる、
このことを考えて作成したのですが、うまくいきませんでした。
お手数ですが、ご回答いただけると嬉しいです。宜しくお願い致します。
回答1件
0
ベストアンサー
CSSの.imgは、imgの間違いでしょうか。
いずれにしろ、img要素のheightは100%にして、
その親の.img_boxのheightを50%にしてみたらどうですか?
css
1.img_box { 2 position: absolute; 3 top: 25%; 4 right: -25%; 5 height: 50%; 6} 7 8img { 9 display: block; 10 height: 100%; 11}
これで、垂直方向については要件通りな気がします。
水平方向の要件は良く分かりませんので、別途調整が必要ですね。
投稿2020/11/27 15:41
総合スコア1323
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/28 08:53