固定邊角的靈活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和right_middle div的需要有idential自動高度。

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：

.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通過JS腳本擾流板使用。

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的表格，把圓角圖像中每個角，樹蔭在兩側/背景爲合適的，把你的內容在中間。你甚至可以讓中排OR欄變成3寬/高，使它看起來有點兒滑溜。

OR

您可以不嘗試推倒重來，而是用做圓角比如通過一個jQuery插件或彎曲拐角的一個備受尊敬的方式：http://www.curvycorners.net