CSSで多くのDIVを配置する方法

StackOverflow https://stackoverflow.com/questions/1025048

  •  06-07-2019
  •  | 
  •  

質問

CSSを学習するために、W3Schoolesに関する長いチュートリアルを実行しました。いくつかの基本を学びましたが、それでも私の主な目的であるDIVの位置付けができません

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

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

私の目標は一部の人にとってシンプルでささいなことですが、これを正しい方法でやるのは頭痛の種です。または、単に別のDIVとマージします

私がやったのは、FireBugを使用してマージンとパディングの値を単純に操作することです。私が今必要なのは、この単純な（私は希望する）トリックを学ぶことです。絶対相対配置を使用しますか？マージン、パディング、サイズを変更しますか？

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

役に立ちましたか？

解決

2つの列を互いに浮かせようとしているようです。これはかなり単純で、ここで詳しく説明します：

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

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

他のヒント

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

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

代わりに親divで overflow：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>

960グリッドシステムにあるコードをエミュレートできました。

正しい方法は、多くのものが実際にクロスブラウザ互換ではないため困難です。ブラウザは改善されていますが、IE互換の何かを使用しなければならない場合、それは依然として悪夢です。 （多くのハック）

絶対配置を使用すると、divを絶対に配置できます。欠点は、ページを表示するウィンドウの解像度やサイズに関係なく、これらの位置に固定されることです。

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

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>

＆quot; float：left＆quot;列を並べて並べます。最後のdiv（クリア：両方）は、列の後に置いたものが列の下に留まるようにします。これにより、他の列のスタイルを変更することなく、いずれかの列の幅を変更できます。

<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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top