コード内でactivity-flexboxの中のimg class="activity-mark"とpを
横並びで表示させたいです。
添付した完成予想図のように表示させたいです。

試したこと：<div class="activity-flexbox">の中の、img class="activity-mark"とpを

<div class="wrap">で囲みました。コードに反映しています。

下記、完成予想図です。

教えていただけると幸いです。
よろしくお願いいたします。

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        <meta name="description" content="ディスクリプションディスクリプションディスクリプション">
8        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
10        <link rel="stylesheet" href="css/style.css">
11        <link rel="stylesheet" href="css/responsive.css">
12        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
13    </head>
14    <body>
15        <div class="activity-wrapper">
16           <div class="container">
17                <div class="heading">
18                    <h2 class="heading-title">タイトルタイトルタイトル</h2>
19                </div>
20                <div class="activity-flexboxContainer">
21                    <div class="activity-flexbox">
22                        <figure>
23                            <img class="activity-image" src="ダミーダミーダミー" alt="">
24                        </figure>
25                        <h3>ダミーダミーダミー</h3>
26                        <div class="wrap">
27                            <img class="activity-mark mark-space" src="ダミーダミーダミー" alt="">
28                            <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
29                        </div>
30                    </div>
31　　　　　　　　　　　　　<div class="activity-flexbox">
32                        <figure>
33                            <img class="activity-image" src="ダミーダミーダミー" alt="">
34                        </figure>
35                        <h3>ダミーダミーダミー</h3>
36                        <div class="wrap">
37                            <img class="activity-mark mark-space" src="ダミーダミーダミー" alt="">
38                            <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
39                        </div>
40                    </div>
41　　　　　　　　　　　　　<div class="activity-flexbox">
42                        <figure>
43                            <img class="activity-image" src="ダミーダミーダミー" alt="">
44                        </figure>
45                        <h3>ダミーダミーダミー</h3>
46                        <div class="wrap">
47                            <img class="activity-mark mark-space" src="ダミーダミーダミー" alt="">
48                            <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
49                        </div>
50                    </div>
51　　　　　　　　　　　　　<div class="activity-flexbox">
52                        <figure>
53                            <img class="activity-image" src="ダミーダミーダミー" alt="">
54                        </figure>
55                        <h3>ダミーダミーダミー</h3>
56                        <div class="wrap">
57                            <img class="activity-mark mark-space" src="ダミーダミーダミー" alt="">
58                            <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
59                        </div>
60                    </div>
61                </div>
62            </div>
63        </div>
64    </body>
65</html>

css
1@charset "UTF-8";
2* {
3    box-sizing: border-box;
4}
5html {
6    font-size: 100%;
7}
8body {
9    font-family: 'Lora', serif;
10    font-family: 'Noto Serif JP', serif;
11}
12a {
13    text-decoration: none;
14}
15h2, h3, p {
16    font-weight: normal;
17}
18.container {
19    width: 1170px;
20    padding: 0 15px;
21    margin: 0 auto;
22}
23.activity-wrapper {
24    padding-top: 130px;
25    text-align: center;
26}
27.activity-flexboxContainer {
28    padding-top: 50px;
29    display: flex;
30    flex-wrap: wrap;
31    justify-content: space-between;
32}
33.activity-flexbox {
34    padding: 0 10px;
35}
36.activity-flexbox figure {
37    overflow:hidden;
38    margin: 0 auto;
39    width: 540px;
40    height: 320px;
41}
42.activity-image {
43    width: 100%;
44    height: 100%;
45    object-fit: cover;
46    transition:1s all;
47}
48.activity-flexbox h3 {
49    padding-top: 15px;
50    font-size: 16px;
51    letter-spacing: 5px;
52}
53.activity-image:hover {
54    transform:scale(1.2,1.2);
55    transition:1s all;
56}
57.activity-mark {
58    width: 50px;
59    padding-top: 15px;
60    display: block;
61    text-align: left;
62}
63.wrap {
64    display: flex;
65}
66.mark-space {
67    padding-bottom: 70px;
68}

m.ts10806

2021/01/07 06:14

>※コードからは試したことは削除しております。別途「試したこと」としてその部分だけでもコード提示してください現状だと丸投げとそう変わりません

行動規範の内容に同意します

回答1件

こんばんは。

閉じタグが一個多いです。

html
1                        <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミー</p><!--横並びにしたいp部分です-->
2                        </div>
3                        ^ これ

追記

普通にラップしてフレックスコンテナにすればいいと思います。

html
1                    <div class="wrap">
2                        <img class="activity-mark mark-space" src="ダミーダミーダミー" alt="">
3                        <!--横並びにしたい部分です-->
4                        <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
5                        <!--横並びにしたいp部分です-->
6                    </div>

css
1.wrap{
2    display: flex;
3}

投稿2021/01/07 07:19

編集2021/01/07 07:26

Lhankor_Mhy

総合スコア36138

Lhankor_Mhy

2021/01/07 07:22

ああ、ひとつめのコードとふたつめのコードは違うのですね……

Lhankor_Mhy

2021/01/07 07:26

追記しました。

user20

2021/01/07 07:46

ご回答いただき、ありがとうございます。教えていただいたコードを試してみましたが、クラス名wrapの幅に収まらず、pタブはcontainer幅に広がってしまうようです。もしよろしければ、添付した完成予想図のような幅間隔で、 wrap幅に横並びでクラス名activity-markとpを配置する方法を教えていただけないでしょうか。よろしくお願いいたします。

Lhankor_Mhy

2021/01/07 07:53

> pタブはcontainer幅に広がってしまう当方の環境ではそのようなことは起こりませんでした。ご提示いただいていない部分のコードが原因かもしれません。

user20

2021/01/08 05:59

昨日はご回答いただき、ありがとうございました。度々の質問で失礼いたします。回答いただいた、wrapクラスで囲んだコードを反映させ、質問内容に修正し直しました。私の方では、この状態では添付した完成予想図のようには表示できません。補足として、質問ではactivity-wrapper部分のみを書き出していますが、作成しているサイトは他にheaderやtop-wrapperもあります。しかし、全体に反映されているものはcssでのbodyやcontainerのみですので、質問で記載したactivity-wrapper部分のみで不足していないと思います。長文になってしまい申し訳ございませんが、私の方でうまく表示させることができない理由がお分かりでしたら、教えていただけないでしょうか。よろしくお願いいたします。

Lhankor_Mhy

2021/01/08 07:15

なるほど、p要素の文字数を増やしたのですね。では、 .wrap{ width: 540px; } などとしてサイズ指定をするといいのではないかと思います。

行動規範の内容に同意します