繁体   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