3

私はCSSを学ぶためにW3Schoolesに関する長いチュートリアルを経験しました。私はいくつかの基本を学びましたが、それでも私の主な目的を逃しています：DIVのポジショニング

これが私がやろうとしていることです

*---------*---------*
*         *         *
*         *         *
*---------*---------*

私の目標は単純で些細なことですが、これを正しい方法で行うのは頭痛の種です。実際、私はそれを行いましたが、DIVにテキストを追加したり、単に別のDIVとマージしたりすると、多くの問題が発生します。

私がやったことは、FireBugを使用してマージンとパディングの値を操作することです。私が今必要としているのは、この単純な（私が望む）トリックを学ぶことだけです。私が見逃しているのは、この単純なポジショニングがどのように機能するかということです。絶対的な相対測位を使用しますか？マージン、パディング、サイズを変更しますか？

この点を説明する良いチュートリアルがある場合は、それを指摘してください。Googleでそれを探すのに他の頭痛の種がありました。

4

6 に答える 6

6

2つの列を並べてフロートしようとしているようです。これはかなり単純で、ここで詳細に説明されています：

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

いくつかの要素をオーバーレイする必要がない限り、 positionプロパティから離れる傾向があります。

于 2009-06-21T23:55:57.310 に答える
5

CSSで2列のレイアウトを作成する

個人的には、brタグにclear：bothを使用するのは好きではありません。

代わりにオーバーフローを使用： 親divでauto

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>
于 2009-06-22T09:29:13.973 に答える
1

960グリッドシステムで見つかったコードをエミュレートすることができました。

多くのものは実際にはクロスブラウザ互換ではないため、正しい方法は困難です。ブラウザは改善されていますが、IE互換のものを使用する必要がある場合は、それでも悪夢です。（たくさんのハック）

于 2009-06-21T23:52:48.593 に答える
0

divに特定の幅を設定しても問題がない場合は、次の方法でうまくいきました。

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

「float：left」は、列を並べて表示します。最後のdiv（クリア：両方）は、列の後に置くものがすべて列の下にとどまるようにします。このようにして、もう一方のスタイルを乱すことなく、どちらかの列の幅を変更できます。

于 2009-06-22T00:03:04.877 に答える
0

絶対ポジショニングを使用すると、任意のdivを絶対に配置できます。欠点は、ページを表示するウィンドウの解像度やサイズに関係なく、それらがそれらの位置で動かなくなることです。

できることは、左の列を左にフロートさせてから、右の列にフロートを指定しないことです。絶対値も相対値も指定せずにデフォルトの位置を維持し、必要に応じて要素の幅を調整します。

于 2009-06-21T23:55:30.743 に答える
0 
<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>
于 2009-06-22T02:20:41.777 に答える