オブジェクトのはみ出し

Question

ある既存のサイトの画像の張替えの練習をしているところなのですが、どうしてもわからないことがあるため、質問させていただきます。

下記の画像を見て分かる通り、正常な例では、キレイなボタンが出力されているのに対し、異常な例では大きくはみ出してしまっています。

今回、サイト内の既存の画像をすべて張替えたため、その際にずれたのだと思われますが、新しい画像すべてを、photoshopで既存の画像に合わせてクロップすることで、調整しました。

大変恐縮ですが、今回既存のサイトのCSSがあまりにも複雑かつ、大量であるため、コードとして記載するのを、控えさせていただきました。

この問題では、恐らく、後から追加のCSSにコードをうつことで解決できると思うのですが、まずなぜこのようなはみ出し方をするのかが分からないため、対処することができず、困っています。

どなたかわかる方いましたら、ご教授頂けないでしょうか？

よろしくお願いします。

念の為、編集中のURL co-712.it.3919.com と、

既存のサイトのURL http://www.kikkoman.co.jp/
を掲載させていただきます。

HTML

<a href="/homecook/index.html" role="button" aria-pressed="false" tabindex="0" title="ホームクッキングへ">

正常な例
![

異常な例

Answer 1

「ホームクッキングへ」のボタンが大きく伸びているのは、clearfixが効いていないためです。
CSSがあまりにも膨大なので整理しきれませんが、とりあえず下のCSSを追加すれば元通りになります。

.divide-layout--modifier>div>div>div>div::after {
    content: "";
    clear: both;
    display: block;
}

「行事のイベントレシピ」と「料理の基本」が下にずれているのは、その上段の「10分以内の手軽な副菜」の高さだけ他の2つより低いためです。

• 1段目1つめ：「鍋物のレシピ」 高さ261px
• 1段目2つめ：「20分以内のスピード主菜」 高さ261px
• 1段目3つめ：「10分以内の手軽な副菜」 高さ260px ** ←1px小さい **

.recipe-list>li の6つの項目は float: left で横に並んでいますが、
float: left;は自分の横幅が右上の位置に収まればそこに行こうとする性質があるので、1段目3つめの高さが若干低いところに4つ目の項目が収まってしまうのです。
これを防ぐには、heightで高さを揃える方法があります。あるいは、clearを使い、回り込みを防ぐ方法もあります。

.recipe-list>li:nth-child(4) {
    clear: both;
}

Comments

[revoiot]

丁寧にご回答いただきありがとうございます。

じっくりといただいた回答をかみ砕いて、細かい基礎知識をつけていきたいと思います。

ありがとうございました！！！！！