CSS：おそらく、その隣の画像で示す

Question

ベスト垂直にスケールする要素が必要です。

1. メインのコンテンツが埋め込まれた要素（d）の左側の背の高い領域（b）は、そのコンテンツ要素（d）とともに縮尺を変更する必要がありますが、そのトップ。
2. また、（c、e）のように、両方の列の下端からキャッピングする要素が必要です。
3. 全領域の幅は640pxを超えることはできません。
4. これらのセクションは、ドキュメントのフロー内に複数存在するため、絶対配置することはできません。
5. 左欄（a、b、c）は固定幅であり、キャップ片（a、c、e）は固定高さである。右の列は、幅が固定されていれば簡単になります。

どうすればよいですか？

Answer 1

これらの行に沿って何かが必要なものを達成するかもしれません。さまざまな部分（a、c、e）に対して絶対的な位置を使用しますが、絶対的に配置されていないdiv内で繰り返すことができます。

'b'セクションは '.rightColumn'の内容で展開されるため、 '.main' divを使用して作成されます。私はあなたが色や画像でそれを埋めるだろうので、そこにコンテンツがないと仮定したので、 'b'の部分の画像などを '.main' divのスタイリングに入れてください。

HTML

<div class="main"> 

    <div class="leftColumnTopCap"></div> 

    <div class="rightColumn"> 

     <p>Your content here...</p> 

    </div> 

    <div class="leftColumnBottomCap"><div> 
    <div class="rightColumnBottomCap"></div> 

</div> 

CSS

.main { 
    /* Any 'b' piece styling goes in here. */ 
    display: block; 
    float: left; 
    width: 640px; 
    margin: 0; 
    padding: 0 0 100px 0; /* Change 100px to whatever the height of your bottom caps are. */ 
    position: relative; /* We can use relative positioning here. */ 
} 

.rightColumn { 
    display: block; 
    float: right; 
    width: 540px; /* Change to whatever width piece '640px - width of a' is. */ 
    margin: 0; 
    padding: 0; 
} 

.leftColumnTopCap { 
    position: absolute; /* The absolute position here relates to the 'main' div. */ 
    top: 0; 
    left: 0; 
    width: 100px; /* Change to whatever width piece 'a' is. */ 
    height: 100px; /* Change to whatever height piece 'a' is. */ 
} 

.leftColumnBottomCap { 
    position: absolute; /* The absolute position here relates to the 'main' div. */ 
    bottom: 0; 
    left: 0; 
    width: 100px; /* Change to whatever width piece 'c' is. */ 
    height: 100px; /* Change to whatever height piece 'c' is. */ 
} 

.rightColumnBottomCap { 
    position: absolute; /* The absolute position here relates to the 'main' div. */ 
    bottom: 0; 
    right: 0; 
    width: 540px; /* Change to whatever width piece '640px - width of a' is. */ 
    height: 540px; /* Change to whatever height piece '640px - width of a' is. */ 
} 

お役に立てば幸いです。

Answer 2

場合によっては、テーブルが作業を完了させる最も実現可能なアイデアになります。私はこのような状況を考えています。「テーブルはデザイン/レイアウトに使用すべきではない」ので、バッシュ処理される危険性があります。

他のソリューションでは、（複数のブラウザにまたがってターゲット設定されている場合）多くのjavascriptやCSS3 flexible box layoutモジュールが必要になります。