固定されたコーナーのフレキシブルdivブロック

Question

my previous questionより複雑なブロックを作成しようとしています。問題は同じです - もし中央のブロックを伸ばすなら - 側面は伸びないのです。

今ではこのhttp://i082.radikal.ru/1107/92/a965bbb5a124.jpgのように見えますが、私はこのhttp://s53.radikal.ru/i140/1107/bd/de5c2c648f20.jpg

left_middle、middle_contとのはidential自動高さを持っている必要がありますright_middleのdivのようにする必要があります。

HTML：

<div class="block1"> 

     <div class="left"> 
      <div class="left_top"></div> 
      <div class="left_middle"></div> 
      <div class="left_bottom"></div> 
     </div> 
     <div class="middle_cont"> 
      <a class="vacancy_title" href="javascript:void(0);">Title</a> 
      <div class="vacancy_full"> 
       <p>MORE TEXT</p> 
           <p>MORE TEXT</p> 
           <p>MORE TEXT</p> 
           <p>MORE TEXT</p> 
      </div> 
     </div> 
     <div class="right"> 
      <div class="right_top"></div> 
      <div class="right_middle"></div> 
      <div class="right_bottom"></div> 
     </div> 
    </div> 

CSS：JSスポイラースクリプトで使用

.block1,.block2 { 
    width:946px; 
} 
.middle_cont, .left_middle,.right_middle { 
    background:#ffdac0; 
} 
.middle_cont, .middle_cont2 { 
    min-height: 46px; 
    float:left; 
    width:840px; 
} 
.left { 
    float:left; 
    min-width:53px; 
} 
.right { 
    float:right; 
    min-width:53px; 
} 
.left_top, .left_bottom, .right_top, .right_bottom { 
    min-height:23px; 
} 
.left_top { 
    background: url('/img/site001/content_blocks/left_top.png') no-repeat; 
} 
.left_bottom { 
    background: url('/img/site001/content_blocks/left_bottom.png') no-repeat; 
} 
.right_top { 
    background: url('/img/site001/content_blocks/right_top.png') no-repeat; 
} 
.right_bottom { 
    background: url('/img/site001/content_blocks/right_bottom.png') no-repeat; 
} 

PSのvacancy_titleとvacancy_full。

Answer 1

ページの幅がある場合静的な..これはこれを行う良い方法です。

http://jsfiddle.net/Xtw84/1/

編集：実は、最後のボックスには、テキストのためのいくつかのフロートが必要になることがありますか、それはIE6

EDIT2で壊すかもしれない：今、私はあなたがよくああ......柔軟に言及実現しました。.. How to create a dynamic box with shadow - using PNG pictures同じことが丸い角にも適用されます。

Answer 2

これはjavascriptの事実の後に行うことができます。

OR

あなたは、コーナーのそれぞれに丸みを帯びた角の画像を入れ、必要に応じてサイド/バックグラウンドで日陰を3x3の表を使用し、途中で自分のコンテンツを置くことができます。中央の行または列を3ワイド/ハイにして、それを少し滑らかに見えるようにすることもできます。

OR

あなたはないは車輪の再発明をし、代わりに、このようなjQueryプラグインや曲線美のコーナーなどを介して丸みを帯びた角を行うための尊敬の方法を使用しようとすることができます：http://www.curvycorners.net