アイコン画像+吹き出し（balloon）の調整不具合につきまして

前提・実現したいこと

HtmlとCssで、アイコン画像の横に吹き出しがでるように調整しています。

今回、アイコン画像部分を大きくしたいため

.balloon777-left .faceicon
と
.balloon777-right .faceicon

の中のwidthを80pxから150pxに変更しました。

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

アイコン画像自体は大きくなったのですが、
吹き出しに文字を多く入力していくと、
吹き出しの位置が下へずれるという現象が起きています。


この場合、どのように修正すれば、吹き出しの位置がずれることなく
アイコンの真横に吹き出しが表示されるのでしょうか？


ご教授いただけましたら幸いです。
よろしくお願い致します。

該当のソースコード

HTML
1<!--左吹き出しはじまり-->
2<div class="balloon777-left">
3  <div class="faceicon">
4    ★ここにアイコン画像を入れる <img~>★
5  </div>
6  <div class="chatting">
7    <div class="says-left">
8      <p>★文章を入れる★</p>
9    </div>
10  </div>
11</div>
12<!--左吹き出し終わり-->
13
14
15
16<!—右吹き出しはじまり-->
17<div class="balloon777-right">
18  <div class="faceicon">
19    ★ここにアイコン画像を入れる <img~>★
20  </div>
21  <div class="chatting">
22    <div class="says-right">
23      <p>★文章を入れる★</p>
24    </div>
25  </div>
26</div>
27<!--右吹き出し終わり-->
28

CSS
1/*左向きここから */
2.balloon777-left {
3  width: 100%;
4  margin: 1.5em 0;
5  overflow: hidden;
6}
7
8.balloon777-left .faceicon {
9  float: left;
10  margin-right: -90px;
11  width: 150px;
12}
13
14.balloon777-left .faceicon img{
15  width: 90%;
16  height: auto;
17  border: solid 3px #d7ebfe;
18  border-radius: 50%;
19}
20
21.balloon777-left .chatting {
22  width: 100%;
23}
24
25.says-left {
26  display: inline-block;
27  position: relative; 
28  margin: 5px 77705px;
29  padding: 17px 13px;
30  border-radius: 12px;
31  background: #d7ebfe;
32}
33
34.says-left:after {
35  content: "";
36  display: inline-block;
37  position: absolute;
38  top: 18px; 
39  left: -24px;
40  border: 12px solid transparent;
41  border-right: 12px solid #d7ebfe;
42}
43
44.says-left p {
45  margin: 0;
46  padding: 0;
47}
48/*左向きここまで */
49
50
51/*右向きここから */
52.balloon777-right {
53  width: 100%;
54  margin: 1.5em 0;
55  overflow: hidden;
56}
57
58.balloon777-right .faceicon {
59  float: right;
60  margin-left: -90px;
61  width: 150px;
62}
63
64.balloon777-right .faceicon img{
65  width: 90%;
66  height: auto;
67  border: solid 3px #d7ebfe;
68  border-radius: 50%;
69}
70
71.balloon777-right .chatting {
72  width: 100%;
73}
74
75.says-right {
76  display: inline-block;
77  position: relative; 
78  margin: 0px 105px 5px 0px;
79  padding: 17px 13px;
80  border-radius: 12px;
81  background: #d7ebfe;
82}
83
84.says-right:after {
85  content: "";
86  display: inline-block;
87  position: absolute;
88  top: 18px; 
89  right: -24px;
90  border: 12px solid transparent;
91  border-left: 12px solid #d7ebfe;
92}
93
94.says-right p {
95  margin: 0;
96  padding: 0;
97}
98/*右向きここまで */

試したこと

.says-left や　.says-right

内のmargin: 0px 105px 5px 0px;

部分を調整してみたが、上手く修正できませんでした。

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

css
1.says-left {
2  display: inline-block;
3  position: relative; 
4  margin: 5px 77705px; /* このばかでかいmarginをなんとかしましょう */
5  padding: 17px 13px;
6  border-radius: 12px;
7  background: #d7ebfe;
8}