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需要具有理想的自动高度。

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;
}

JS诈骗脚本使用的PS vacancy_title和vacancy_full。

Answer 1

您可以在javascript中执行此操作。

OR

您可以使用3x3桌子，将圆角图像放在每个角落，适当地遮挡侧面/背景，并将内容放在中间。您甚至可以使中间行OR列为3宽/高并使其看起来有点光滑。

OR

你可以不尝试重新发明轮子，而是使用备受尊重的圆角方式，例如通过jquery插件或曲角：http://www.curvycorners.net

Answer 2

如果你的页面宽度是静态的..这是一个很好的方法。

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

编辑：实际上最后一个框可能需要一些浮动文本，否则它可能会在ie6

中断

Edit2：现在我意识到你提到了灵活......哦...... How to create a dynamic box with shadow - using PNG pictures这同样适用于圆角。

灵活的div块，带有固定角

2 个答案: