テーブルを置き換えるためにDIVを使用する - 左右のセルの幅を知らずにページの幅を埋めてください

したがって、5つのセルを持つ1つの行があります。内部3の幅は静的である。インナー3が中央にくるように、最初と最後（左端と右端）がページを埋めるように展開されます。外側のセルは、繰り返しの背景イメージを含むため、必要です。テーブルを置き換えるためにDIVを使用する - 左右のセルの幅を知らずにページの幅を埋めてください

<table width="100%"> 
    <tr height="400"> 
     <td></td> 
     <td width="200"></td> 
     <td width="300"></td> 
     <td width="200"></td> 
     <td></td> 
    </tr> 
</table>

しかし、私はDIVのとCSSを使用して同じ効果を得ることができないよう、：外側の細胞に幅を供給していないが、それらを拡張し、余分なスペースを作ることを可能にするためのテーブルを使用して、これは、簡単です。ただし、display：table;プロパティ。このプロパティはIE6とIE7ではサポートされていないので、私はこれを回避する別の方法を見つけることを望んでいます。

<div id="container"> 
    <div id="stretchLeft"></div> 
    <div id="left"></div> 
    <div id="center"></div> 
    <div id="right"></div> 
    <div id="stretchRight"></div> 
</div>

出典

2012-02-28 thereedeffect

loadおよびresizeでjavascript/jQueryを使用するとできます。全ページ幅を取得します。次に（全ページ幅 - 左幅 - 中央幅 - 右幅）/ 2 これはストレッチの幅になります。

出典

2012-02-28 16:13:05

興味深い！私はこのようにレイアウトに近づくことを決して考えなかった。 – thereedeffect

#stretchLeftと#stretchRightの唯一の目的が、残りの3つのdivを中央に置くことである場合は、単に除外してください。

body{ 
    text-align:center; 
} 
#container{ 
    width:700px; 
    margin:auto; 
} 


<body> 
    <div id="container"> 
     <div id="stretchLeft"></div> 
     <div id="left"></div> 
     <div id="center"></div> 
     <div id="right"></div> 
     <div id="stretchRight"></div> 
    </div> 
</body>

あなたは何をしますか？

彼らはコンテンツを持っている場合は、これらの線に沿って何かが動作しますが、それはあなた自身の個人的な状況にひねら必要があります。 http://jsfiddle.net/YFx2m/

あなたがそれらをサポートするためのビジネス上の理由がない限り、また、FWIWは、IE6は1未満であります％のシェア、IE7は5％未満です。

出典

2012-02-28 16:18:46

私は、 "stretchLeft"と "stretchRight" DIVにページデザインの一部として繰り返しの背景イメージが含まれていると述べていたはずです。私はそれに応じて私の投稿を編集します。 – thereedeffect

外側のセルがページをフレームするためだけにある場合は、さらに簡単です。本文に繰り返しの背景イメージを与え、#containerに背景色を付けます。 –

クリス、それは最も簡単な解決策でしょう。私は元々それを試みた。唯一の問題は、繰り返しパターンが「左」と「右」の画像に結びついていることです。文書の側面に対して繰り返し始めると、パターンは整列しません。デザインはwww.metroaffinity.comで、コンテンツ領域は中央、ダークグレー "ブラケット"は "左"、 "右"、ライトグレーのテクスチャは "stretchLeft"と "stretchRight" – thereedeffect

テーブルを置き換えるためにDIVを使用する - 左右のセルの幅を知らずにページの幅を埋めてください

答えて

関連する問題