html - 寻找一种方法来模拟不规则形状的 DIV

Question

我正在为一位设计师开发一个网站，我们可以说，他更倾向于打印设计而不是网络。他们为这个网站设计的页面给了我一个不规则的内容区域。

如果这是一个手工编码的网站，我可以通过切片图像和明智地使用 float 、绝对定位和 z-indexes 来(煞费苦心地)进行布局——但该网站是在 Drupal 中完成的，我的内容区域就是它是(我想我可以在 node.tpl.php 中做一些严重的黑客攻击，但即使那样也会有问题)。

这就是我的意思 - 页眉和页脚都有一些突出的部分延伸到内容区域:

+--------------------------------------------------+
|                                                  |
|                LOGO/HEADER AREA                  |
|                                                  |
|       +------------------------------------------+
|       |         HEAD ONE FOR PAGE                |
|       | Lorem ipsum dolor sit amet, consectetur  |
|       | adipiscing elit. Praesent in lectus in   |
+-------+ lectus tempor volutpat vitae velnunc.    |
| Duis diam sem, mattis in eleifend nec,vulputate  |
| ac dolor.Aliquam eleifend, mi non adipiscing     |
| condimentum, erat nunc consectetur lorem, at     |
| aliquet arcu purus non sapien. Sed in neque eu   |
| velit venenatis tincidunt vel in est.            |
|                                                  |
| Cras fermentum magna non erat pretium suscipit.  |
| Proin id leo neque. Aliquam vel metus eget       |
| libero venenatis consectetur. Aliquam      +-----+
| lobortis lacinia eros vel vulputate.Mauris |     |
| lorem diam, bibendum et fringilla nec ...  |     |
+--------------------------------------------+     |
|                                                  |
|                 LOGO/FOOTER AREA                 |
+--------------------------------------------------+

目前我勉强可行的解决方案是将内容区域内容放入表中，明智地使用行跨度和列跨度以避免突出区域。除了痛苦之外，它还违背了使用 CMS 的目的 - 必须手动修改每个页面中的 HTML 以使表格单元格在页面限制内正常工作。

所以 - 我想我的问题是:是否有一种纯 CSS(甚至是 CSS/Javascript)的方式来做到这一点，而无需在每个页面中求助于脆弱、容易出错的表格编码？

(注意，我已经告诉设计师这是个问题，但客户已经批准了设计，所以至少对于这个元素，我坚持这样做)

Answer 1

嘿!这样的解决方案怎么样？ http://jsfiddle.net/steweb/H7s2P/

您“只”需要拆分内容段落。顶部一个负责页眉“效果”，底部一个负责页脚“效果”(通过“ float ”和边距调整技巧):)

标记:

<div id="wrapper">
    <div id="header">LOGO/HEADER AREA</div>
    <div id="content">
        <div id="piece-of-header"></div>
        <p id="top">
        HEAD ONE FOR PAGE <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis lorem. Fusce sit amet purus non nulla fringilla sollicitudin. Donec ultrices, nulla ac tincidunt faucibus, odio arcu pellentesque lectus, sit amet bibendum risus velit suscipit odio. Nulla facilisi. In scelerisque auctor orci, eu volutpat risus vulputate sit amet. Mauris dictum blandit fringilla. In et ante quis quam molestie consequat vehicula vitae ligula. Quisque ultricies volutpat lectus, eget accumsan diam malesuada eu. Fusce nec tellus magna. Phasellus at sem eget lectus varius vestibulum. Phasellus sodales aliquet lectus et feugiat. Curabitur mi nulla, vehicula sed dictum ut, dapibus ut sem. Fusce at tortor at augue tincidunt viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitot viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapien risus eleifend urna, sed posuere er
        </p>
        <div id="piece-of-footer"></div>
        <p id="bottom">
         rttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapittitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapienus eleifend urna, sed posuere er
        </p>
    </div>    
    <div id="footer">LOGO/FOOTER AREA</div>    
</div>

CSS:

#wrapper{
    width:400px;
    margin:0 auto;
}
#header, #footer{
    padding:20px;
    text-align:center;
    background:#BEBEBE;
}
#content{
    overflow:hidden
}
#content p#top{
    padding-top:10px;
}
#content p#bottom{
    padding-bottom:10px;
}
#piece-of-header{
    width:70px;
    height:70px;
    float:left;
    margin:0 20px 10px 0;
    background:#BEBEBE;
    clear:both;
}
#piece-of-footer{
    margin:12px 0px 0px 10px;
    width:70px;
    height:70px;
    float:right;
    background:#BEBEBE;
}