静的要素：絶対

私は次のマークアップがあります。私のマークアップで、しかし静的要素：絶対

+---------------------------+--------+ 
|Left      |Right | 
+---------------------------+--------+ 
|Bottom        | 
+------------------------------------+

：私はここで達成しようとしています何

<html> 
<body style="margin:0;padding:0"> 
    <div> 
     <div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div> 
     <div style="border:3px solid blue; width:25%; position: absolute; left:72.5%">Right</div> 
     <div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div> 
    </div> 
</body> 
</html>

を3つのdivはこのようにレイアウトされ"bottom" divは "left" & "bottom"と重なっています。

この効果を得るには、どのように3つの要素をスタイルする必要がありますか？

"bottom"はページの最後の要素ではありません。私は単に "left"と "right"を1行に入れ、次の行からページフローをデフォルトの位置にして続けます。

EDIT：

：あなたは、静的な高さを持っていないか、何らかの理由でそれをハードコーディングしたくない場合は受け入れ答えに加えて...、あなたと同様の効果を得ることができます

<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div> 
<div style="border:3px solid blue; width:25%; margin-left:72.5%">Right</div> 
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>

出典

2011-07-05 Konrad Garus

'[the]' bottom 'divは「left」＆「bottom」の部分にオーバーラップしています。 ...下のdivは重複しています**それ自体**？ –

私は、要素が絶対的に配置されていると、ドキュメントフローから取り除かれるという問題があると思います。だから来る要素は、それらを見ることができず、そこに存在しないと仮定し、飛び跳ねる。あなたの "bottom" divを "left"/"right" divの下にくるようにするには、その高さ（またはそれに似たもの）に等しいmargin-topを与えなければなりません。なぜあなたは位置を使用している

出典

2011-07-05 20:14:56 sdleihssirhc

わからない：あなたが与えられたレイアウトが必要な場合は、絶対

を、あなたはこれを試すことができますか？

<div style="clear:both;"> 
     <div> 
      <div style="border:3px solid red;width:70%;float:left;padding:3px">Left</div> 
      <div style="border:3px solid blue;width:25%;float:left;padding:3px">Right</div> 
     </div> 
     <div style="clear:both;border:3px solid black;width:96%;padding:3px">Bottom</div>  
    </div>

幅の％で制御するのが難しい場合があります。

これも試すことができますか？必要に応じて幅を調整することができます。

通常、私はこれを私のマスターページに保存します。そうすれば、すべての子ページは問題ありません。

<div style="clear:both;width:532px"> 
     <div> 
      <div style="border:3px solid red;width:350px;float:left;padding:5px">Left</div> 
      <div style="border:3px solid blue;width:150px;float:left;padding:5px">Right</div> 
     </div> 
     <div style="clear:both;border:3px solid black;width:516px;padding:5px">Bottom</div>  
    </div>

出典

2011-07-05 20:41:17 kheya

これは哲学的な暴言になるだろう。他の答えは具体的な回避策を提供しますが、これはより大きな画像を見ています。私は自分自身に "なぜ"この問題について尋ねてきました。

CSSはカスケード接続スタイルシートです。それはスタイリングを行うように設計されています。また、いくつかのレイアウト、almostも行います。

希望の効果を得るための2つの方法が他の方法論者に示されています。位置と

：絶対答え、「左」を持つことが可能である（see also this techniqueposition: relative内position:absoluteを使用しています）、固定幅と幅の残りの部分を取るDIV「右」をDIV（あるいはその両方のためのパーセンテージを使用あなたが好きなら）両方のdivに幅と幅を与えてください。しかし、絶対divがページフローの外にあるので、下のdivはその下に正しく流れません。コンテンツの高さが固定されている場合は、固定高さを指定できます。そうでない場合、あなたは運がないので、別のテクニックを試してみる必要があります。

Projapatiの技術では、フローはうまくいきますが、2 divのうちの1つをピクセルで固定し、もう1つは残りのコンテナ幅を占めることはできません。パーセントや幅を指定できます両方のdivのピクセル単位で表示しますが、divに "残りの部分"を占めるように指示する方法はありません。また、ページを非常に狭くすると、 "Right" divは次の行に落ち、これらのdiv暫定的には互いに隣り合っている。要するに、どちらのアプローチも、このタスク用に設計されていない再利用構造の複雑なハックであり、どちらも人々の行いたいものの限定されたサブセットです。 StackOverflow（例えばthis one）には、同様の細目を聞くたくさんの質問があります。tar pitには、特定のCSSテクニックを微調整して目的のレイアウトを近似しようとしています。そのテクニックを使わないで、あなたがしたいことをしないでください。そして、あなたはCSSを正しく理解していません。

事は、望ましくないですfloat: left。 position: absoluteは不要です。それらは誰でもスケッチして理解できるシンプルなレイアウトであり、CSSがうまく扱えない理由を理解するのが難しいという最終的な目的のための手段です。 CSSが何をしているのか、人々がそれを期待しているのかという基本的な不一致があります。実際、CSSを使い始めると、人々は実際にCSSを理解しません。しかし、CSSは私たちの利益のために作られたものであり、私たちは失敗します。この障害は、CSSのユーザにはない。

希望するレイアウトは、グリッドのようになります。 2列、2列。高さがコンテンツを埋めるように拡大します。 "Left"は最初の行と最初の列にあり、幅は全体幅のパーセントまたは固定幅で、 "right"は最初の行と2番目の列で、残りの幅を占めます。「ボトム」は第2行のコンテンツで、両方の列にまたがります。あるいは、「ボトム」はグリッドの外側で、ページの直後にあります。

グリッドレイアウトas proposed hereは、人々がページレイアウトについてどのように考えているかに非常によく似ており、さまざまなCSSハックが現在使用されているすべてのケースをカバーするため、CSSでは必要です。

単にCSSグリッドを指定することができます。「2列のグリッドが必要です。左側が100ピクセル、右側がコンテナ幅の残りの部分を占めます。残りのページはその下を流れます。完了しました。

幅の20％を占める左の列に変更するか、代わりに右の列を固定する、または高さを固定する場合は、1行のccsを変更すると完了です。現在のテクニックでは、現在使用しているCSSハックの限界に達すると、違うが厳しい限界を持つ別のハックで最初から始めます。

IMHO CSSグリッドは、ほとんどの人が気づくよりも大きな取引であり、この愚かなCSSレイアウトのハッカーのすべてはついに消えます。

これはdoable in IE10とそれに匹敵するブラウザになるということです。悪いニュースは、IE8とIE9を長く、長い間サポートすることになるということです。私の推測ではuntil at least 2016。

出典

2012-02-15 21:08:52 Anthony

+1これは受け入れられる回答でなければなりません;-)絶対的に配置されたdivを浮動した相対的に配置されたdivに置くことは、私が必要としたものです。ありがとう、トニー。 – Stano

Yahoo YUI CSS Grid builderを使用して、この種の柔軟な列レイアウトを生成できます。

出力は、私が手作業でコードしたいものではなく、divの入れ子が5深く、縮小したときに6kbのYUI CCSライブラリを参照します。私はこれが簡単に説明することができますが、手書きでは簡単ではないことは幸いではありません。

ここに生成されたhtmlがあります。これはCSSなしではあまり意味がないかもしれません。

<html> 
<head> 
    <title>YUI Base Page</title> 
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
    <style type="text/css"> 
    #custom-doc { width: 100%; min-width: 250px; } 
    </style> 
</head> 
<body class="yui-skin-sam"> 
<div id="custom-doc" class="yui-t1"> 
    <div id="hd" role="banner"><h1>header content</h1></div> 
    <div id="bd" role="main"> 
    <div id="yui-main"> 
    <div class="yui-b"><div class="yui-g"> 
Main content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 
</div> 
    </div> 
    <div class="yui-b">Left bar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> 

    </div> 
    <div id="ft" role="contentinfo"><p>footer content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> 
</div> 
</body> 
</html>

マークアップで左の前に右の列が来ることを、現在のChromeとFirefoxで、およびInternet Explorer 9 ノートで正常に動作するようです - float: rightが<div id="yui-main">に使用されています。 :aftercssルールの使用は面白く、重要かもしれません。

出典

2012-03-22 20:42:48 Anthony

答えて

関連する問題