画像と文字を横並べ、テキストのインデント
解決したいこと
以下から、写真とテキストを横並びに表示させたいです。
また、おはようございますの次にインデントをかけたいです。
完成図は下の通りです。
該当するソースコード
ソースコードを入力
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>メニュー</title>
</head>
<body>
<div class="main">
<div class="contents">
<span>コンテンツ</span>
</div>
<div class="text">
<h1>テキスト</h1>
<!-- <div class="flex"> -->
<figure class="image"><img src="img/path-gfbcb81fc1_1920.jpg" width="250px"></figure>
<p>
こんにちはもう秋ですね。
</p>
<figure class="image"><img src="img/3ab79a1f126670f833ef14ac2b2306bf_t.jpeg" width="250px"></figure>
<p>
冬がやってきましたね。
</p>
<!-- </div> -->
<h2>テキスト</h2>
<p>
① おはようございます<br>
こんにちは<br>
こんばんは
</p>
</div>
</div>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('.toggle').click(function() {
$(this).toggleClass('active');
$('#toggle-menu').toggle();
});
});
</script>
</body>
</html>
該当するソースコード
* {
margin: 0;
padding: 0;
}
body {
/* padding-top: 90px; */
background-color: #f8f8f8;
}
h1{
margin-left: 30px;
margin-top: 20px;
font-size: 30px;
}
h2{
margin-left: 30px;
margin-top: 20px;
font-size: 25px;
}
.main{
margin-top: 0;
border-radius: 5px;
border: 2px solid #97C1E5;
display: inline-block;
margin-left:20px;
margin: 15px;
}
.contents{
color: #000000;
background-color: #E9F1FF;
border-color: #97C1E5;
padding: 10px 15px;
border-bottom: 2px solid #97C1E5;
display: block;
}
p{
font-size: 20px;
font-family: serif;
text-indent: 1em;
margin: 35px;
line-height: 2;
}
.flex {
display: flex; /*横並び*/
}
.image {
margin-left: 60px;
padding: 0;
overflow: hidden;
position: relative;
}
自分で試したこと
<画像と文字の横並べ>
全体をdivで囲い、display:flexをしましたが、2枚目の画像も横並びになってしまいました。
<テキストのインデント>
classを付けて、margin-leftしましたが、変化は見られませんでした。
よろしくお願い致します。
0
