0

画像と h1 ヘッダーを含むアンカー タグがたくさんあります。float 要素を適用して、2 行でレイアウトできるようにしました。ただし、何らかの奇妙な理由で、天の川のリンクによって次のアンカーが右に浮いてしまいます。天の川と土星を入れ替えるとうまくいきます。私は一生、理由を理解することはできません。この奇妙な現象を説明できる人はいますか?

これが私のページの jsfiddle です: http://jsfiddle.net/SVuQQ/

4

2 に答える 2

1

clear:bothAndromeda アンカーに追加すると、フロートの問題が修正されます。さらに追加する場合に必要になる可能性のある他のアンカーにクラスを追加できるように設定しました。.clear

説明:clear:bothフロートのある左右の要素がページ レイアウトの流れに影響を与えないようにします。この場合、天の川錨のフロートが下の要素に悪影響を及ぼしていました。アンドロメダ座のアンカーに追加clear:bothすることで、天の川のフロートは残りの要素を押し下げなくなりました。

別の解決策: 高さが異なるアンカー タグがあるため、フロートの問題が発生しています。一方のフロートが他方のフロートよりも遠くに押し下げられているため、適切に積み重ねることができません。それらすべてに同じ高さを設定すると、clear:both なしで問題が解決します。jsfiddle.net/SVuQQ/7

于 2012-06-29T06:36:07.270 に答える
-1

#subject-content a-menu {height: auto} を設定することをお勧めします

同じ行の float:left を削除します (例: #subject-content a-menu)

于 2012-06-29T06:39:47.197 に答える