divをどのように配置し、内部のdivの周りを展開するには？

私は、全体のコンテンツの周りに背景と境界線がある、私が中心にしたいページを持っています。divをどのように配置し、内部のdivの周りを展開するには？

私はdivを作って、私が望む背景色と境界設定で設定しました。

問題は、浮動小数点数の内側に浮動小数点数があり、背景が浮動小数点数の周囲に伸びないという問題です。私はそれを働かせることができた唯一の方法は位置を設定することでした：絶対的です。その後、ボーダーはフローティングdivsの周りを拡大しましたが、私はそれらを通常のhtml/cssを使用して中央に配置することができませんでした。

JavaScriptをハックして中心に置いていましたが、ページが読み込まれた後にしか表示されず、表示が悪くなります。

私は確かにコンテナを拡張して、それを中心にしておく方法があると確信しています。私はそれを理解できません。ここ

は、もっと良い方法が

$(function() { 
     var winH = $(window).height(); 
     var winW = $(window).width(); 
     $("#container").css('left', winW/2 - $("#container").width()/2); 
    });

が持っている私の問題

<div style="background-color: Red; width: 980px; position: absolute;" id="container"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <div style="width: 400px; background-color: Black; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="width: 400px; background-color: Blue; float: left;"> 
     <br /> 
     <br /> 
    </div> 
</div>

を共有し、ここでそれが動作するJavaScriptを（jqueryのを使用しています）サンプルHTMLページです。

ありがとうございました

出典

2009-05-20 Sruly

使用autoトリックを行う必要があります。

浮動要素の後ろに要素を置き、clearを使用して下に配置します。フローティングではないので、外側のdivのサイズに影響します。

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <div style="width: 400px; background-color: Black; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="width: 400px; background-color: Blue; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="clear: both; height: 0; overflow: hidden;"></div> 
</div>

出典

2009-05-20 16:25:33 Guffa

ありがとうございました。私は方法があると思ったが、私はそれを理解できなかった。 – Sruly

これはトリッキーなものですが、私はスタイルシートで次のコードを使用します。

<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>

<div class="sentor"> 
<div class="child"> 
    <div id="mycontent">

要素を中央に左と右のmarginとしては

出典

2009-05-20 16:24:48 simon622

あなたの質問をよく理解していないかもしれませんが、これと似たようなものを探していると思います。ここに私たちのシンプルなレイアウトだ：

<html> 
    <head> 
     ... 
    </head> 

    <body> 

     <div id="center"> 
      <!-- your content --> 
     </div> 

    </body> 

</html>

のdiv＃センターの内容は、ページの中央に移動してもらうために、私たちは以下のCSSを必要とする：

body { 
    text-align: center; 
} 

div#center { 
    text-align: left; 
    width: 600px; // Or some other arbitrary width 
    margin: 0 auto; 
}

これは、体内のすべてのものを中心に説明します。しかし、text-align：center;プロパティはbodyの子にも適用されるので、2番目のスタイルルールでそれをキャンセルします。また、のdiv＃センターの代わりに、あなたは次のスタイル規則を使用することができます。

body * { 
    text-align: left; 
}

出典

2009-05-20 16:31:45

これはInternet Explorerのバグを使用します。他のブラウザでは動作しません。標準に準拠しており、要素をブロックするためにtext-alignを適用しないためです。 – Guffa

ええ、私は余白を残しました：0オート;部。私はそれを忘れていた。私はそれを私自身の多くの作品に取り入れました！ –

用途：

<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">

マージン：0自動;赤いdivを中心にします。

overflow：hidden;赤いdivのストレッチに2つのフローティングdivを含めるようにします。

出典

2009-05-20 21:24:34 Emily

divをどのように配置し、内部のdivの周りを展開するには？

答えて

関連する問題