一千萬個為什麽

搜索

高級css:頂部和底部,靈活的中心


只有css2才有可能具備以下條件:

  • 靈活的div.mid部分中的所有內容
  • 重疊頂部和底部
  • 沒有關於ie6
  • 的討論

這是帶有中心切片的photoshop:

替代文字http://i39.tinypic.com/11qnzbt.jpg

你可以看到頂部和底部非常大,我需要從中間切片重疊它們...

請不要誤解這裏,我理解如何制作靈活的中央div,復雜性在頂部和底部的重疊,而中間div保持靈活。

我想它需要負邊距或絕對位置頂部和底部元素與z-index ..

最佳答案

這是一個開球的例子,你可以復制'n'paste'n'run它。

<!DOCTYPE HTML>

    <head>
        <title>SO question 2781669</title>
        
    </head>
    <body>
        <div id="wrap_centre">
            <div class="top"></div> 
            <div class="mid">
                <div class="content">mid
mid
mid
mid
mid
mid
mid</div> </div> <div class="bot"></div> </div> </body> </html>

您只需要為 .mid 創建一個新切片。

Update: as per the comments, above is updated.

轉載註明原文: 高級css:頂部和底部,靈活的中心

猜你喜歡