一定以上のサイズで画像の下にテキストを入れつつ、画像と別のテキストを横並びにする方法

前提・実現したいこと

こんばんは！1つ質問させて下さい。
一定以上のサイズ(848pxより大きいサイズ)で画像の下にテキストを入れつつ、画像と別のテキストを横並びにしたいです。

発生している問題・エラーメッセージ

float:leftを使って要素を左寄せにしました。テキスト全体が右側の空間に流れ込むようなレイアウトになってしまいます。下記のような表記が理想です。←画像が荒く、申し訳ありません...。

該当のソースコード

HTML
1<!DOCTYPE html>
2
3<html lang="ja">
4<head>
5	<!-- Required meta tags -->
6	<meta charset="utf-8"><!-- Bootstrap CSS -->
7	<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" rel="stylesheet">
8	<script crossorigin="anonymous" src="https://kit.fontawesome.com/8b5cdbe473.js">
9	</script>
10	<link href="css/style.css" rel="stylesheet">
11	<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
12
13	<title>SAMPLELP</title>
14</head>
15
16<body>
17	<div id="wrapper">
18
19	<main>
20
21
22<!-- 受講者の声 -->
23
24<div class="container">
25	<p class="h4 text-center">受講者の声</p>
26		<div class="row">
27			<div class="col-md-12">
28				<div class="image-one">
29					<img alt="image1" class="img-1 pb-4" src="img/1.jpg"> 
30					<p class="mai">Maiさん</p>
31				</div>
32				<div class="m-p bg-light">
33					<p class="p h6 pt-2 pb-1 text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
34
35          <p class="p h6 pt-2 pb-1 text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
36
37					<p class="p h6 pt-2 text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, </p>
38				</div>
39			</div>
40		</div>
41</div>
42		
43
44		</main>
45		<!-- Optional JavaScript -->
46		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
47		<script crossorigin="anonymous" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
48		</script> 
49		<script crossorigin="anonymous" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">
50		</script> 
51		<script crossorigin="anonymous" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
52		</script>
53	</div>
54</body>
55</html>
56
57CSS
58#wrapper {
59  width:100%;
60  overflow:hidden;
61}
62
63.image-one {
64  text-align: center;
65  position:relative
66}
67
68.img-1 {
69  float:left;
70}
71
72.mai {
73 position: absolute;
74 left:50px;
75 top:155px;
76}
77
78.m-p {
79  overflow: hidden;
80  padding: 20px 25px;
81}
82
83/* 848pxより小さい画面サイズ */
84
85@media screen and (max-width: 848px) {
86
87.img-1 {
88  float:none;
89}
90
91}
92

試したこと

テキストに対してposition:absoluteを指定し、位置を移動させました。理想通りの表記になったのですが、848pxより小さいサイズではテキストの表記が左側にズレてしまいます。
そもそもfloatを使用しない方が良いのでしょうか？うまく表記出来る方法があればアドバイスを頂きたいです。どうぞ宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

メディアクエリのサイズに関しては特に意図は無く、今回848pxというサイズを指定させて頂きました。

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

回答1件

ベストアンサー

848pxより小さいサイズではテキストの表記が左側にズレてしまいます。

848px以下のサイズでは、「Maiさん」をどこへ出したいですか?
画像の下、左右中央で良いなら、positionをstaticへ戻すだけで良いと思いますよ。

css
1@media screen and (max-width: 848px) {
2  .mai {
3    position: static;
4  }
5}

floatを使うかどうかは、他の方法(display: flexとか)と比較して総合的に判断しましょう。現状だと、bootstrapが活かせてない感じですね。

投稿2021/02/20 14:49

gpsoft

総合スコア1323

inou-

2021/02/21 01:20

gpsoftさん、返信ありがとうございます。画像の下、左右中央に配置したかったです。アドバイス頂いた通り、position:static;を指定したところ、理想通りになりました！分かりました！flexboxなど色々試してみて、総合的に判断していきたいと思います。 bootstrapがうまく活かせていない。 →ご指摘頂き、ありがとうございます。自分の中で考えてみたのですが、現状だとカラム分けする必要がないので、bootstrapはそもそも使わなくても良い、ということでしょうか？

gpsoft

2021/02/21 02:09

画像のカラムと、別テキストのカラムに分けないのなら、外枠を`.row`にする意味が薄れるなぁ、と思いました。もちろん、このページ全体、サイト全体のデザイン方針の問題なので、ここだけ見て判断することはできませんね。

inou-

2021/02/21 11:22

返信ありがとうございます！カラム分けしないのであれば、rowを指定する必要はあまりないということですね！まだまだbootstrapの基本的な仕組みが理解出来ておらず、勉強不足を感じます...。参考にさせて頂きます。ご指摘頂くと、自分で気付く事が出来なかった部分に気付けるので本当に勉強になります。前回・今回の解答と、ありがとうございました。

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