1

Drupal Zen テーマでは、サイドバーとメイン div がすべて左に浮いていて、各 div の margin-right がページの 0 の位置に戻されていることに気付きました。ここでデモを見ることができます。同じ結果を得るには多くの方法があることは知っていますが、このアプローチを使用する利点に興味があります。sidebar-second を右にフロートさせないのはなぜですか? 前もって感謝します！

#main {
    float: left;
    margin-left: 20%;
    margin-right: -80%;
    width: 60%;
    background-color: #eee;
}

#sidebar-first {
    float: left;
    margin-left: 0;
    margin-right: -20%;
    width: 20%;
    background-color: #FFFF66;
}

#sidebar-second {
    float: left;
    margin-left: 80%;
    margin-right: -100%;
    width: 20%;
    background-color: #FFFF66;
}

</p>

4

2 に答える 2

0

最初に頭に浮かぶのは、それらをすべて左にフロートさせると、各コンテナーが他のコンテナーに突き合わされたままになるということです。2 番目のサイドバーが右にフロートし、含まれる div がその子 div の合計よりも大きい場合、その 2 番目のサイドバーは他のサイドバーから離れてしまいます。それらをすべて左にフロートさせると、レイアウトを流動的に保つのが簡単になります。

2 番目に思いつくのは、おそらくもっと根本的に重要なことですが、フロートやマージンなどを一方向にのみ適用するのが一般的に良いということです。それらがすべて一方向に進むと、開発中に追跡するのがずっと簡単になります。押し下げたり押し上げたりするマージンや、左右に移動するフロートがあると、開発者にとって混乱の層が増えるだけです。

マージンの方向に関連するフロートの方向に関するIEのバグもありますが、正確には思い出せません...フロートの同じ方向にマージンを適用しないようなものだと思います...したがって、それらは左にフローティングしますとマージン（？）右。

PS:

CSS ウィザードの Harry Roberts は、なぜ余白と物事を一方向に保つべきかについて素晴らしい記事を書きました。

そして、フロートの同じ方向にマージンを追加するときの IE バグに関する最初の記事。. 問題は、IE5/6 でマージンが 2 倍になることです。IMHO lte IE6 用に設計する必要はもうないと思いますが、margin と float を反対方向に配置するのがおそらくベスト プラクティスです。

于 2012-07-26T02:54:10.923 に答える
0

Drupal 時代の記憶によると、Zen テーマがこのように設定されている主な理由は、実際のページ コンテンツを最初に HTML に出力できるようにするためです。(いくつかの Drupal テーマは実際にこの方法論を使用していましたが、zen が最も優れた例だと思います)。

次に、すべてを左にフロートさせ、クレイジーなマージン計算を使用して、ナビゲーションが上にあり、サイドバー 1 がコンテンツの左側に表示され、サイドバー 2 がコンテンツの右側に表示されるようにします。

これは、スクリーン リーダーやロボットなどへのアクセシビリティに関して、より使いやすくすることを目的としていました。

この古いA list Apartの記事は、一般的に使用中の方法を説明していると思います: http://alistapart.com/article/negativemargins

于 2015-03-29T20:08:48.493 に答える