画像がメッセージ(li要素)に接近するとメッセージが縮んで画像を回避する

サンプルはこちら

メッセージの長さや画面幅に応じて、メディアクエリで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;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です