内部リンクのトラブルシューティング（href = "＃x" id = "x"）

Question

誰かが私の内部リンクがウェブページ上で動作していない理由について誰かが天才的な考えを持っているのだろうかと思います。私はここでは、標準

<a href="#link"><button>Some Text</button></a> 
.... 
bunch of content 
.... 
<div id="link"></div> 

でHTMLを設定した は、私は、コードの十分なビットをグレーアウトし、原因となった行を分離するまで、これは未知の理由のために働いていなかったcodepenリンク http://codepen.io/Cornucopia/pen/vyrPWw?editors=1100#0

です問題。リンクされたCSSファイルの1つに、flo要素がありました：li要素のために残されました。コマンドはボタンのリンクに関連付けられていないので、ハイパーリンクが機能しないようにする理由を見分けることはできません。しかし、 ".grid .tile {float：left;}"がグレー表示されると、リンクは再び動作します。

Answer 1

問題は、<div id="link"></div>を除き、すべてが左にフローティングされていることです。私は次のことをテストしたが、うまくいくようだ。

.grid .tile { float: left;} /*cuase of problem*/ 
#link { clear:left;} /* add this */ 

clear:left;休憩floatとその後山車が再び戻って起動。バック、それは内なる位置にdivを置きます。 :)

1つの潜在的な問題は、写真に壊れたくないということです。私は、あなたがまだお互いに列を立てることを望むなら、お互いの写真と車の写真を入れて、次に#link { float:left; }を入れてください。写真は異なるタイプのものなので、ブレークは適切だと私の意見では思っています。

Answer 2

あなたが得た結果は間違いありません。

ケース1：

/*.grid .tile {float: left;} */ 
<div id="link" style="width:100%;height:30px;background:yellow;"></div> 

結果：

そして、あなたのボタンをクリックするだけで、あなたがこの場所に来ます。

ケース2：

.grid .tile {float: left;} 
<div id="link" style="width:100%;height:30px;background:yellow;"></div> 

結果：

を参照してください、今のdivの場所（黄色の背景）だから、

は、アンカーが正しく機能しています。ブラウザのレンダリング、htmlやJavaScriptに問題はありません。あなたが完全にフロートを理解していない第二のケースでの災難の

理由

。これは、最初に--->の高さを取って次のアイテムにスペースを与えることができなくなったということを意味する（表示：インライン+ポジションアブソリュート）のようないくつかの混合動作のようなアイテムをレンダリングする。。第2に、これは、もはやY軸の他の項目の位置、すなわち高さがではなくなります。

これで、すべてのli（すべて浮動小数点：left）がY軸上のスペースを取ったり、高さのスペースを取ったりすることに何の影響もありません。だからDivは、（ポジションのように）上にシフトしました。絶対的なアイテムは他のアイテムには影響しません。

したがって、同じものを削除すると、目的の結果が得られます。

希望、これが役に立ちます！