アイコンのレイアウト崩れを防ぎたい

html&CSSでタイムライン風デザインを作成しているのですが、アイコンのレイアウトがテキスト数に影響を受けてレイアウトが崩れてしまいます。
アイコンを固定したいのですがどうすればよいでしょうか？

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Timelinebox</title>
6<link rel="stylesheet" type="text/css" href="css/style.css">
7<link rel="stylesheet" href="css/font-awesome.min.css">
8</head>
9
10<body>
11 <div class="chatbox">
12 
13 	<div class="chatlogs">
14 	
15 		<div class="chat user1">
16 			<div class="user-photo">
17 				<a href="#"><img src="#"></a>
18 			</div>
19 				<p class="chat-message">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
20 				
21 			<input type="submit" value="&#xf08a;">
22 			<input type="submit" value="&#xf079;">
23 			</p>
24 	 	</div>
25 		
26 		<div class="chat self">
27 			<div class="user-photo">
28 			<img src="#"></div>
29 			<p class="chat-message">ああああああああ</p>
30 		</div>
31 		
32 	</div>
33 	
34 	<div class="chat-form">
35 		<textarea></textarea>
36 		<button>送信</button>
37 	</div>
38 	
39 </div>
40 
41</body>
42</html>
43
44
45
46```css
47@charset "utf-8";
48/* CSS Document */
49* {
50	margin: 0;
51	padding: 0;
52	box-sizing: border-box;
53}
54
55body {
56	background: #1ddced;
57}
58
59.chatbox {
60	width: 500px;
61	min-width: 390px;
62	height: 600px;
63	background: #fff;
64	padding: 25px;
65	margin: 20px auto;
66	box-shadow: 0 3px #ccc;
67}
68
69
70.chatlogs {
71	padding: 10px;
72	width: 100%;
73	height: 450px;
74	background: #eee;
75	overflow-x: hidden;
76	overflow-y: scroll;
77	
78}
79
80.chatlogs::-webkit-scrollbar {
81	width: 10px;
82}
83
84.chatlogs::-webkit-scrollbar-thumb {
85	border-radius: 5px;
86	background: rgba(0,0,0,.1)
87}
88
89.chat {
90	display: flex;
91	flex-flow: row wrap;
92	align-items: flex-start;
93	margin-bottom: 10px;
94}
95
96.chat .user-photo {
97	width: 60px;
98	height: 60px;
99	background: #ccc;
100	border-radius: 50%;
101	overflow: hidden;
102}
103
104.chat .user-photo img {
105	width: 100%;
106}
107
108.chat .chat-message {
109	width: 80%;
110	padding: 15px;
111	margin: 5px 10px 0;
112	border-radius: 10px;
113	color: #fff;
114	font-size: 20px;
115	word-wrap: break-word;
116}
117
118.user1 .chat-message {
119	background: #1adda4;
120}
121
122.self .chat-message {
123	background: #1ddced;
124}
125
126.chat-form {
127	margin-top: 20px;
128	display: flex;
129	align-items: flex-start;
130}
131
132.chat-form textarea {
133	background: #fbfbfb;
134	width: 75%;
135	height: 50px;
136	border: 2px solid #eee;
137	border-radius: 3px;
138	resize: none;
139	padding: 10px;
140	font-size: 18px;
141	color: #333;
142}
143
144.chat-form textarea:focus {
145	background: #fff;
146}
147
148.chat-form textarea::-webkit-scrollbar {
149	width: 10px;
150}
151
152.chat-form textarea::-webkit-scrollbar-thumb {
153	border-radius: 5px;
154	background: rgba(0,0,0,.1)
155}
156
157.chat-form button {
158	background: #1ddced;
159	padding: 5px 15px;
160	font-size: 30px;
161	color: #fff;
162	border: none;
163	margin: 0 10px;
164	border-radius: 3px;
165	box-shadow: 0 3px 0 #0eb2c1;
166	cursor: pointer;
167	
168	-webkit-transition: background .2s ease;
169	-moz-transition: background .2s ease;
170	-o-transition: background .2s ease;
171}
172
173.chat-form button:hover {
174	background: #13c8d9;
175}
176
177.chat-form button:active {
178	position: relative;
179    top: 3px;
180    box-shadow: none;
181}
182
183input[type=submit]{
184	font-family: FontAwesome;
185	border: none;
186	border-radius: 30%;
187	padding: 4px;
188	font-size: 18px;
189	position: relative;
190	float: right;
191	top: 10px;
192	cursor: pointer;
193	margin-left: 7px;
194	color: #fff;
195	background: #000;
196	margin-top: 30px;
197}
198
199input[type=submit]:hover {
200	color: #D33D3F;
201}
202

kei344

2017/07/07 15:00

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答1件

ベストアンサー

以下のようにしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>Timelinebox</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
7    <style type="text/css">
8        * {
9            margin: 0;
10            padding: 0;
11            box-sizing: border-box;
12        }
13
14        body {
15            background: #1ddced;
16        }
17
18        .chatbox {
19            width: 500px;
20            min-width: 390px;
21            height: 600px;
22            background: #fff;
23            padding: 25px;
24            margin: 20px auto;
25            box-shadow: 0 3px #ccc;
26        }
27
28        .chatlogs {
29            padding: 10px;
30            width: 100%;
31            height: 450px;
32            background: #eee;
33            overflow-x: hidden;
34            overflow-y: scroll;
35
36        }
37
38        .chatlogs::-webkit-scrollbar {
39            width: 10px;
40        }
41
42        .chatlogs::-webkit-scrollbar-thumb {
43            border-radius: 5px;
44            background: rgba(0, 0, 0, .1)
45        }
46
47        .chat {
48            display: flex;
49            flex-flow: row wrap;
50            align-items: flex-start;
51            margin-bottom: 10px;
52        }
53
54        .chat .user-photo {
55            width: 60px;
56            height: 60px;
57            background: #ccc;
58            border-radius: 50%;
59            overflow: hidden;
60        }
61
62        .chat .user-photo img {
63            width: 100%;
64        }
65
66        .chat .chat-message {
67            width: 80%;
68            padding: 15px;
69            margin: 5px 10px 0;
70            border-radius: 10px;
71            color: #fff;
72            font-size: 20px;
73            word-wrap: break-word;
74        }
75
76        .user1 .chat-message {
77            background: #1adda4;
78        }
79
80        .self .chat-message {
81            background: #1ddced;
82        }
83
84        .chat-form {
85            margin-top: 20px;
86            display: flex;
87            align-items: flex-start;
88        }
89
90        .chat-form textarea {
91            background: #fbfbfb;
92            width: 75%;
93            height: 50px;
94            border: 2px solid #eee;
95            border-radius: 3px;
96            resize: none;
97            padding: 10px;
98            font-size: 18px;
99            color: #333;
100        }
101
102        .chat-form textarea:focus {
103            background: #fff;
104        }
105
106        .chat-form textarea::-webkit-scrollbar {
107            width: 10px;
108        }
109
110        .chat-form textarea::-webkit-scrollbar-thumb {
111            border-radius: 5px;
112            background: rgba(0, 0, 0, .1)
113        }
114
115        .chat-form button {
116            background: #1ddced;
117            padding: 5px 15px;
118            font-size: 30px;
119            color: #fff;
120            border: none;
121            margin: 0 10px;
122            border-radius: 3px;
123            box-shadow: 0 3px 0 #0eb2c1;
124            cursor: pointer;
125
126            -webkit-transition: background .2s ease;
127            -moz-transition: background .2s ease;
128            -o-transition: background .2s ease;
129        }
130
131        .chat-form button:hover {
132            background: #13c8d9;
133        }
134
135        .chat-form button:active {
136            position: relative;
137            top: 3px;
138            box-shadow: none;
139        }
140
141        input[type=submit] {
142            font-family: FontAwesome, sans-serif;
143            border: none;
144            border-radius: 30%;
145            padding: 4px;
146            font-size: 18px;
147            position: relative;
148            float: right;
149            top: 10px;
150            cursor: pointer;
151            margin-left: 7px;
152            color: #fff;
153            background: #000;
154            margin-top: 30px;
155        }
156
157        input[type=submit]:hover {
158            color: #D33D3F;
159        }
160    </style>
161</head>
162
163<body>
164<div class="chatbox">
165    <div class="chatlogs">
166        <div class="chat user1">
167            <div class="user-photo">
168                <a href="#">
169                    <img src="#">
170                </a>
171            </div>
172            <div class="chat-message">
173                ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
174                <div>
175                    <input type="submit" value="&#xf08a;">
176                    <input type="submit" value="&#xf079;">
177                </div>
178            </div>
179        </div>
180        <div class="chat self">
181            <div class="user-photo">
182                <img src="#">
183            </div>
184            <p class="chat-message">
185                ああああああああ
186            </p>
187        </div>
188    </div>
189    <div class="chat-form">
190        <textarea title=""></textarea>
191        <button>送信</button>
192    </div>
193</div>
194</body>
195</html>