画像と h1 ヘッダーを含むアンカー タグがたくさんあります。float 要素を適用して、2 行でレイアウトできるようにしました。ただし、何らかの奇妙な理由で、天の川のリンクによって次のアンカーが右に浮いてしまいます。天の川と土星を入れ替えるとうまくいきます。私は一生、理由を理解することはできません。この奇妙な現象を説明できる人はいますか?
これが私のページの jsfiddle です: http://jsfiddle.net/SVuQQ/
画像と h1 ヘッダーを含むアンカー タグがたくさんあります。float 要素を適用して、2 行でレイアウトできるようにしました。ただし、何らかの奇妙な理由で、天の川のリンクによって次のアンカーが右に浮いてしまいます。天の川と土星を入れ替えるとうまくいきます。私は一生、理由を理解することはできません。この奇妙な現象を説明できる人はいますか?
これが私のページの jsfiddle です: http://jsfiddle.net/SVuQQ/
clear:both
Andromeda アンカーに追加すると、フロートの問題が修正されます。さらに追加する場合に必要になる可能性のある他のアンカーにクラスを追加できるように設定しました。.clear
説明:clear:both
フロートのある左右の要素がページ レイアウトの流れに影響を与えないようにします。この場合、天の川錨のフロートが下の要素に悪影響を及ぼしていました。アンドロメダ座のアンカーに追加clear:both
することで、天の川のフロートは残りの要素を押し下げなくなりました。
別の解決策: 高さが異なるアンカー タグがあるため、フロートの問題が発生しています。一方のフロートが他方のフロートよりも遠くに押し下げられているため、適切に積み重ねることができません。それらすべてに同じ高さを設定すると、clear:both なしで問題が解決します。jsfiddle.net/SVuQQ/7
#subject-content a-menu {height: auto} を設定することをお勧めします
同じ行の float:left を削除します (例: #subject-content a-menu)