そこで、シンプルなレイアウトを試してみました。基本的に写真多めのインタビュー形式です。
これが私がフォローしている基本的な概念です。
-イントロ
-写真
-インタビュー
にマージントップを設定して<div id="interview">
いますが、機能しません。なぜですか? レイアウトの構造に問題があると思います(クロムで要素の検査をクリックした場合)
それを修正する方法は?リンク: http://mysecretathens.gr/kulte_test/osterman.html
そこで、シンプルなレイアウトを試してみました。基本的に写真多めのインタビュー形式です。
これが私がフォローしている基本的な概念です。
-イントロ
-写真
-インタビュー
にマージントップを設定して<div id="interview">
いますが、機能しません。なぜですか? レイアウトの構造に問題があると思います(クロムで要素の検査をクリックした場合)
それを修正する方法は?リンク: http://mysecretathens.gr/kulte_test/osterman.html
これは、フローティング要素をクリアしていないためです。<div id="interview">
このように宣言して使用する前に、フロートをクリアするだけですmargin-top: /* Whatever px */
<div style="clear: both;"></div>
<div id="interview">
そしてあなたのウェブサイトを見ると、ランディングページに重い画像を使用しているため、帯域幅が不足しているユーザーを悩ませています。lazy loading
これを修正するクリーンな方法は、photos 要素に「overflow: hidden」を追加することです。
#photos {overflow:hidden;}
上記のすべての画像がフローティングされているため、「機能しません」。そのため、親要素の高さにまたがりません。
div に追加overflow:hidden
して、#photos
すべての画像が含まれ、それらが浮き上がらないようにします。これにより、次の要素のマージントップが期待どおりに機能します。