Question

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

如果这是一个手工编码的网站，我可以通过切片图像和明智地使用浮动，绝对定位和z索引来进行布局（艰苦地） - 但该网站正在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）的方法来做到这一点，而不是在每个页面中使用脆弱的，容易出错的表格编码？

（N.B。我已经告诉设计师这是一个问题，但是客户已经批准了设计，至少对于这个项目，我坚持使用它）

Answer 1

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

您只需要拆分内容段落。顶部一个负责标题'效果'，底部一个照顾页脚'效果'（通过'浮动'和边距调整技巧）：）

标记：

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

Answer 2

顶部很容易，只需用一个向左浮动的空div结束你的标题块。内容块的文本将环绕它。

检查这个小提琴：http://jsfiddle.net/rodin/kcpbz/

对于底部，你基本上是搞砸了，如前所述：How can I wrap text around a bottom-right div?

Answer 3

唯一的方法你可以在保持文本换行的同时将图像放在伸出的两个角落。所以你有3个div一个在另一个上面，其中有两个图像，第一个有一个浮点数：左边第二个浮点数：右边

文本应该是float：left和代码中的2个图像的中间

尝试一下，它应该可以工作我认为：）

Answer 4

这是对的吗？

http://jsfiddle.net/hR9ST/

编辑：有一些水平滚动，但这不应该很难修复。我现在正在工作，所以我现在已经花了很多时间在它身上。：）

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

4 个答案: