HTMLとcssでページを作っています。右図のような形にしたいのですが、margin topで指定す

締切済

質問者：riribestwanko
質問日時：2023/06/08 23:39
回答数：3件

HTMLとcssでページを作っています。右図のような形にしたいのですが、margin topで指定すると左の図のようになってしまい、「今なら」の文字が右側ではなくimgの下側にきてしまいます。これを解消するにはどうすればいいでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2023/06/09 11:40

こんにちは

肝心の文書構成をどうしたいのかについての記載がありませんけれど・・

図と「今なら～」がひとつのセットなら、バラバラにレイアウトをするのではなく、包含要素を設けておいて、そちらで調整すれば良いのでは？

実態が不明ですが、例えば
　<figure>
　　　<img ～～>
　　　<figcaption>～～</figcaption>
　</figure>

のようになっているとするなら、
figure {
　display: flex;
　margin-top: ○○;
}
などとしておけば良さそう。
図とキャプションの位置関係は、別に調整すれば良いでしょう。

- 1
- 件

通報する

だいじょうぶ

No.2

回答者： gura_
回答日時：2023/06/09 11:20

riribestwanko さん

　････右図のような形にしたいのですが、･････

こんな感じですか。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>

.wrap {
width: 500px; height: 500px; margin: 0 auto;
box-sizing: border-box;
}
.wrap h1{ margin: 0;
box-sizing: border-box;
width: 100%; padding: 20px;
border: solid #444; text-align: center;
}
.wrap .img{
margin-top: 50px; width: 50%;
text-align: right;
}
.wrap .img img{
width: 200px;
}
.wrap .txt{
width: 50%; margin: 30px 0 0 auto;
font-size: 1.5rem;
}
</style>

</head>
<body>
<div class="wrap">
<h1>Ochawan</h1>
<div class="img"><img src="https://oshiete.xgoo.jp/images/v2/common/profile …
<div class="txt">今なら 100 円</div>
</div>

</body>
</html>