###やりたいこと
chat-face imgの横に文字を表示させたい。
文字を置いてみたのですが、ボックスなどその他のデザインが崩れてしまい、ダメでした。
よろしくお願いします。
※追記
横というのは画像の左側です。
###コード
css
1/* チャットレイアウト */ 2.chat-box { 3 width: 100%; 4 height: auto; 5 overflow: hidden; /*floatの解除*/ 6 margin-bottom: 20px; 7} 8.chat-face { 9 float: left; 10 margin-right: -120px; 11} 12.chat-face img{ 13 border-radius: 30px; 14 border: 1px solid #ccc; 15 box-shadow: 0 0 4px #ddd; 16} 17.chat-area { 18 width: 100%; 19 float: right; 20} 21.chat-hukidashi { 22 display: inline-block; /*コメントの文字数に合わせて可変*/ 23 padding: 15px 20px; 24 margin-left: 120px; 25 margin-top: 8px; 26 font-size:16pt 27 /* border: 1px solid gray; ←削除 */ 28 border-radius: 10px; 29 position: relative; /*追記*/ 30 background-color: #D9F0FF; /*追記*/ 31} 32/* ↓追記↓ */ 33.chat-hukidashi:after { 34 content: ""; 35 position: absolute; 36 top: 50%; left: -10px; 37 margin-top: -10px; 38 display: block; 39 width: 0px; 40 height: 0px; 41 border-style: solid; 42 border-width: 10px 10px 10px 0; 43 border-color: transparent #D9F0FF transparent transparent; 44} 45.someone { 46 background-color: #BCF5A9; 47} 48.someone:after { 49 border-color: transparent #BCF5A9 transparent transparent; 50}
HTML
1<div class="chat-box"> 2 <div class="chat-face"> 3名前 <!--☚ここです。--!> 4 5<img src="画像URL" alt="画像" width="90" height="90"> </div> 6<div class="chat-area"> 7<div class="chat-hukidashi">テスト 8</div></div></div> 9
回答1件
あなたの回答
tips
プレビュー