簡體   English   中英

兩側有兩個 Div 的居中 Div -(非現有的完整作品)

[英]Centered Div With Two Divs On Both Sides - (non of existing fully works)

嗯,這就是故事。 我正在開發我的第一個網站,我遇到的第一個問題是制作主 div 的圓角,它將包含所有內容。 CSS3 是一個很好的解決方案,但與 IE6-8 的不兼容阻止了我。

此外,我需要將圓形 div(它實際上是矩形,950x1600 和 30px 圓角)居中並在邊框上有一個漂亮的陰影。

使用背景圖像也不是一種選擇,因為它計划使用無縫模式。

所以我想做的是:

  1. 放一個居中的 div。
  2. 把從 photoshop 剪下來的圖片放在角落里
  3. 使用 1px 高的 PS 圖案作為側面的陰影。

一切都會好起來的,但是“圖案化”的背景會把一切弄得一團糟。 所以我在這里看到的唯一解決方案是在居中 div 的兩側放置兩個 div,從右上角繪制一個正確的圖案,這樣從 photoshop 切割的邊框將與壁板 div 無縫匹配,用作背景圖像。

現在告訴我,伙計們,我是想在這里發明一輛自行車,還是有更好的解決方案?

ps 我發現的所有解決方案在某種程度上都是無用的。 有些非常接近,但在 div 周圍留下一些空白區域 10px。 或者調整到必要的高度和寬度后不要滾動和掉出頁面。 帶有文本的表格在沒有文本的情況下毫無用處(不是嗎?如果我刪除文本,它就會消失)

是的,我是個菜鳥,所以請放縱一下 =)

如果您主要關心的是舊版 IE 中的圓角屬性支持,那么可能值得查看 CSS3Pie (css3pie.com) 之類的插件。 這使用了 'behaviour' 屬性,因此它不會與您的其他瀏覽器混淆 - 為 90% 的當前瀏覽器添加過時的標記是沒有意義的(即為最低公分母設計)。

CSS3 餅圖

老實說,我通常會完全放棄舊版本 IE 中的圓角——只要內容優雅地降級,這絕對沒有壞處。 但是,如果您真的想要一致的外觀,我肯定會使用上面這樣的插件,而不是圍繞應該在很久以前就已經停止使用的瀏覽器來構建整個頁面。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM