メッセージの長さや画面幅に応じて、メディアクエリでli要素のメッセージに付けるマージンや画像のサイズを変えると尚良い。
HTML
- メッセージ1メッセージ1メッセージ1メッセージ1メッセージ1メッセージ1
- メッセージ2メッセージ2メッセージ2メッセージ2メッセージ2メッセージ2
- メッセージ3メッセージ3メッセージ3メッセージ3メッセージ3メッセージ3
- メッセージ4メッセージ4メッセージ4メッセージ4メッセージ4メッセージ4
- メッセージ5メッセージ5メッセージ5メッセージ5メッセージ5メッセージ5
- メッセージ6メッセージ6メッセージ6メッセージ6メッセージ6メッセージ6
- メッセージ7メッセージ7メッセージ7メッセージ7メッセージ7メッセージ7
CSS
.wrapper {
max-width: 700px;
padding: 5px;
margin: 0 auto;
border: 2px solid #cccccc;
/* 画像配置のため */
position: relative;
}
ul {
list-style: none;
}
li {
border: 1px solid #ff0000;
padding: 5px 10px;
margin-bottom: 5px;
}
/* 画像と接触しそうなメッセージにマージンを付ける */
.add-margin-right {
margin-right: 100px;
}
img {
width : calc(176px * 0.5);
height: calc(233px * 0.5);
/* 右下に画像を設置 */
position: absolute;
bottom: 0;
right: 0;
}