灵活的div块,带有固定角

时间:2011-07-14 09:25:46

标签: html css

根据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。

2 个答案:

答案 0 :(得分:2)

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

OR

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

OR

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

答案 1 :(得分:1)

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

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

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

中断

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