画像が親要素からはみ出してしまいまいます。

Question

添付画像のようなレイアウトにしたく、下記コードを書いたのですが、
２段目の画像が親要素からはみ出してしまいます。

１段目から３段目まで、それぞれ画像の位置は

position: absolute
left: -20%

のように本来の画像から少し中に入り込む(表示しない部分を隠せる)ようなイメージで配置しています。

１段目　３段目の画像は
position: absolute
left: -20%

でbody内に収まるのですが、２段目の画像だけ親要素からはみ出てしまいます。
どうすれば回避できるでしょうか

コード

<div class="tutorial-wrapper"> <div class="tutorial-box"> <img class="tutorial-img" src="画像パス"> <div class="tutorial-text"> テキストエリア </div> </div> </div> <div class="tutorial-wrapper"> <div class="tutorial-box"> <img class="tutorial-img-2" src="画像パス"> <div class="tutorial-text"> テキストエリア </div> </div> </div> <div class="tutorial-box"> <img class="tutorial-img" src="画像パス"> <div class="tutorial-text"> テキストエリア </div> </div> </div> "> <div class="tutorial-box"> <img class="tutorial-img" src="画像パス"> <div class="tutorial-text"> テキストエリア </div> </div> </div> <div class="tutorial-wrapper"> <div class="tutorial-box"> <img class="tutorial-img" src="画像パス"> <div class="tutorial-text"> テキストエリア </div> </div> </div>

コード

.tutorial-wrapper {
margin-bottom: 180px;

.tutorial-box {
  position: relative;

}

.tutorial-img {
  position: absolute;
  left: -20%;
}

.tutorial-text {
  background-color: gray;
  position: absolute;
  top: 50%;
  left: 50%;
}

}
/tutorialwrapper/

.tutorial-img_2 {
position: absolute;
left: -20%;
}

position: absolute で高さをなくしてしまうので
下記Jquery で　class="tutorial-box" の高さを取得しています。

``javascript
コード

$(function(){
    var biggestHeight = "0";
    $(".tutorial-box *").each(function(){
        if ($(this).height() > biggestHeight ) {
            biggestHeight = $(this).height()
        }
    });
    $(".tutorial-box").height(biggestHeight);
})

    </script>

![イメージ説明](28417689ddc6d997850e5035c39a1c16.jpeg)

Comments

[Lhankor_Mhy]

ご提示のコードでは問題が再現しませんでした。

https://jsfiddle.net/Lhankor_Mhy/ye649th1/

[kei344]

コードブロックが適切に設定されていません。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

Answer 1

ご回答ありがとうございました。

HTML記述ミスもありましたが、 よくよく考えるとHTMLは左上から表示されていくので
はみ出してしまっていた画像の箇所は、position:absolute　right:-20% のように書くと画像が右へ押しやられてbodyからはみ出していくのは回避できない。　のではないか　という結論に至りました。

別の方法でデザインしようと思います。

Answer 2

なんか、HTMLソースでの3段目の箇所にバリデーションエラーがありますが、記述ミスですか？
よく見るとcssのセレクタの閉じが入れ子になっている箇所もあります。

あと、cssで書かれているセレクタが、htmlに反映されていないので、こちらでは確認ができませんでした。

想像での返答になりますが、恐らくどこかしらのコーディングミスなのでは？

Comments

[Fukusuke0604]

ご回答ありがとうございます。

HTML記述ミスもありましたが、 よくよく考えるとHTMLは左上から表示されていくので
はみ出してしまっていた画像の箇所は、position:absolute　right:-20% のように書くと画像が右へ押しやられてbodyからはみ出していくのは回避できない。　のではないか　という結論に至りました。

別の方法でデザインしようと思います。