固定边角的灵活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