吹き出しの調整方法を教えてください

Question

吹き出しをで会話のような感じにしたいんですが、ウィンドウ幅を狭くすると吹き出しが先生という文字と重なってしまいます。そうではなく、画像の横にずっとあるようにするにはどうすればいいですか？
画像とコードはこの通りです。

<div class="balloon">
 <figure class="balloon-image-left">
   <img src="jpeg/sennsei2.jpeg" alt="先生">
 <figcaption class="balloon-image-description">
     先生
 </figcaption>
 </figure>
 <div class="balloon-text-right">
   <p>
Aくん、学校って何をする所だと思う?って聞かれてすぐに答えられる？
   </p>
 </div>
</div>

<div class="balloon">
 <figure class="balloon-image-right">
   <img src="jpeg/1.jpg" alt="生徒A">
 <figcaption class="balloon-image-description">
     生徒A
 </figcaption>
 </figure>
 <div class="balloon-text-left">
   <p>
    う～～ん、勉強するところ？
   </p>
 </div>
</div>

<div class="balloon">
 <figure class="balloon-image-left">
   <img src="jpeg/sennsei2.jpeg" alt="先生">
 <figcaption class="balloon-image-description">
     先生
 </figcaption>
 </figure>
 <div class="balloon-text-right">
   <p>
  そうだね！勉強する所でもあるよね。じゃあ勉強するだけの所なのかな？</p>
<p>  それだとどうして課題を出したり、
  友達とグループになっていろんなことをしたりしないといけないのかな？</p>

 </div>
</div>

<div class="balloon">
 <figure class="balloon-image-right">
   <img src="jpeg/1.jpg" alt="生徒A">
 <figcaption class="balloon-image-description">
     生徒A
 </figcaption>
 </figure>
 <div class="balloon-text-left">
   <p>
    確かに。何が目的でそんなことをするんだろう？
   </p>
 </div>
</div>
```CSS
.balloon {
margin-bottom: 2em;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 85px;
height: 85px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
margin-left: 25px;
}
.balloon-image-right {
float: right;
margin-left: 20px;
margin-right: 25px;
}
.balloon figure img {
width: 100%;
height: 100%;
border: 1px solid #aaa;
border-radius: 50%;
margin: 0;
}
.balloon-image-description {
padding: 5px 0 0;
font-size: 18px;
text-align: center;
}
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right {
border-color: #aaa;
}
.balloon-text-left {
border-color: #aaa;
}
.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.balloon p {
margin: 0 0 20px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #aaa;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #aaa;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}
![ウィンドウ幅が広いもの](acc44f4ad0e583ccc7c72b4cbc40fd47.png)![ウィンドウ幅が狭いもの](8e2557bc69c98da61fe227a49045d3e9.png)

Answer 1

私のさきほどの回答は忘れてください。

ご提示のCSSで.balloon-text-right,.balloon-text-leftに

max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);

が設定されていますね。これは、想像するに、ウィンドウ幅（100%）から、顔の画像と名前の部分の表示に必要な120pxを引いた残りを、バルーンテキストの幅の上限にする、という設定なのかなと。

これはあなたが書かれたものではないのですか？

で、たぶんですが、顔の画像と名前の部分の表示に、実際は120pxより多く使われてしまっているのではないでしょうか？そのため、バルーンテキストの幅が上記の設定の上限いっぱいになったときの幅と、顔の画像と名前の部分とを合わせると、ウィンドウ幅を超えてしまうときに、同一ライン上に描画されず下にずれるということが起こるのではないかと思います。

なので、顔の画像と名前の部分の表示に実際に必要な幅を正確に設計してみてください。
そして、上記の120pxの部分をそれに直してみてください。

Comments

[nanashi53]

わざわざありがとうございます。いけました！！
これはコピー＆ペーストしたものだったのでわかりませんでした．．．

Answer 2

balloon-image-left balloon-image-description balloon-text-right を、たとえば<div class="balloon-left">で囲んで、.balloon-left{display:flex;}したらいいんじゃないですかね。

Comments

[nanashi53]

すみません。まったくの初心者であまり言ってることがわかりません。。。一部でいいのでコードで教えていただけないでしょうか？