私が何をしたか、中心

に絶対のdivを揃えることは、メインdivにmargin:20%を使用していた...しかし、私はそれが最善の方法だとは思わない：私が何をしたか、中心

CSS：

.wrapper { 
    background-color:#F0C; 
    float:left; 
    width:1000px; 
    height:400px; 

    margin-left:20%; 
    alignment-adjust:central; 
    position:absolute; 
} 

.maincontent { 
    background-color:#3F6; 
    float:left; 
    width:50%; 
    margin-left:30%; 
} 

.leftSidebar { 
    background-color:#C63; 
    float:left; 
    width:30%; 
    margin-left:-80%; 
} 

.rightsidebar { 
    background-color:#66F; 
    float:left; 
    width:20%; 
}

HTML

<div class="wrapper"> 
    <div class="maincontent"> 
     <!-- main content goes here --> 
    </div> 

    <div class="leftSidebar"> 
     <!-- left sidebar content goes here --> 
    </div> 

    <div class="rightsidebar"> 
     <!-- right sidebar content goes here --> 
    </div> 
</div>

どのように私はCに.wrapperを配置することができます入る？簡単な方法はありますか？

また、left/rightのプロパティとmargin-left/margin-rightのプロパティの違いは何ですか？

出典

2011-12-23 Dmitry Makovetskiyd

絶対配置を使用する理由はありますか？私は決してレイアウトの目的でこれを使用しません。 – ptriek

絶対位置と固定位置の違いとデフォルト位置 –

のデフォルトは 'static'です。つまり、通常のブロックやインライン要素のように動作します。「固定」とはレイアウトフローから取り出され、ページがスクロールされていてもブラウザーウィンドウ内のまったく同じ位置にとどまることを意味します。「絶対」とは、レイアウトフローから取り出され、別のレイヤーに置かれることを意味し、左/右/上/下に自由に配置できるため、他の要素の上に積み重ねることができます。 – ptriek

.wrapper { 
    width:1000px; 
    position:absolute; 
    left:50%; 
    margin-left:-500px; 
}

出典

2011-12-23 12:24:54 Purag

うーん..代わりにパーセントでそれをやろうとします。なぜ私は50％残っている必要がありますか？ –

あなたはページの左から50％を置いて、幅の半分に戻します。これは一般的な方法です。 – Purag

whyd oes it work –

私の答えは次のようになります。絶対位置をスキップして、あなたのコンテンツ（なし上下に余白、左自動マージンと右）を中心にmargin:0 auto;を使用しています。

.wrapper 
{ 
    background-color:#F0C; 
    width:1000px; 
    height:400px; 
    margin:0 auto; 
}

出典

2011-12-23 12:45:11 ptriek

wow..if hte marginがautoです。divが中央に設定されています。しかし、もし私がトップとボトムの要素を使ってdivを下向き/上向きにしたいのであればどうしますか？ –

私は完全に理解していない、少し明確に説明できますか？ – ptriek

絶対位置なしでどのように配置しますか？ –

答えて

関連する問題