このWebサイトでは、ブラウザウィンドウを縮小すると、最初に左右の空白が消え、次に右側のパネルが縮小され、次にメインのコンテナパネルが縮小されます。最近、ASP.NET MVCの使用を開始しました。テストケースでは、ブラウザーウィンドウのサイズを変更すると、コンテナーが他のコンテナーの下にドロップします。本体の一部として左、中央、右のセクションがあるsite.masterページを使用しています。動作またはHTML要素を指示する属性がcssにありますか？私はこのサイトのメインページのページソースを見てCSSを見ましたが、これがどのように制御されているかについては明らかなことは何も飛び出していません。
3 に答える
3
Web 開発の優れた点の 1 つは、ほとんどの場合、サイトを見て「どうやってそんなことをしたんだろう」と考えたときに、コードを見て簡単に見つけ出したり、テストしたりできることです。FirebugなどのツールFirefox の場合、IE 8 (F12) および Chrome の開発者ツールはすべて適切にフォーマットされたソースと CSS を表示し、その場で変更できるようにします。
SO の場合、サイトの本体は "container" のクラスの div に含まれます。"container" のスタイル ルールは次のとおりです。
.container {
margin: 0 auto;
text-align: left;
width: 950px;
}
ここで注目しているのは、このクラスの幅が 950 ピクセルに固定されていて、余白が (拡張) に設定されていることです。
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
左右の余白を「自動」に設定すると、div がコンテナーの端の中央に配置され、コンテナーが必要な 950px を占めると、必要な幅に拡張できるようになります。
コンテナー div 内には、id "content" (スタイル ルールなし) を持つ div と、スタイルが次の 2 つの div: "mainbar" と "sidebar" があります。
#mainbar {
float: left;
margin-bottom: 40px;
width: 715px;
}
#sidebar {
float: right;
width: 220px; /* this is also set in the "style" attribute *
}
これらの左右のフロートは、バーを適切な場所に配置しているものです。
別の便利な CSS ルールは次のとおりです。
clear
これは「両方」、「左」、または「右」に設定でき、基本的にコンテナのフロートをリセットします。
ただし、「 CSS の聖杯」と呼ばれることが多いようです(Rick は、IE7 でこれにバグがあることを指摘しています。修正方法については、こちらを参照してください)。これには正当な理由があります: Three Columns, with a least oneそれらの柔軟。
完全に柔軟なレイアウトの他の例には、次のものがあります。
于 2009-04-16T19:49:31.063 に答える
1
float、position、および margin の組み合わせと、これらの要素の設定方法を指定できます。URL がないと、問題の内容や修正方法を正確に判断するのが難しくなります。
出発点として、YUI CSS Grids または 960.gs (960 Grid System) とそこにあるさまざまな reset.css ファイルの 1 つを調べることをお勧めします。YUIはとても良いものを持っています。reset.css ファイルは、css の外観と動作をすべてのブラウザーで同じにします。グリッド システムは、サイトをデザインするための出発点となります。また、設計しているものがすべてのブラウザーで同じように表示され、同じように動作するという確信も得られます。
于 2009-04-16T19:23:22.123 に答える
1
これは HTML レイアウトの問題です。おそらく、asp.net mvc レイアウトはあまりよくできていません。ウェブで「 css column layout 」を検索すると、適切なレイアウトを実現する方法の例がたくさんあります。たとえば、3 列のレイアウト テクニックに関する適切な説明については、MATTHEW LEVINE による In Search of the Holy Grail を参照してください。
于 2009-04-16T19:32:02.913 に答える