html - 放大/缩小时如何使阴影框保持在同一个位置?

标签 html css wordpress alignment

即使我在网页上放大或缩小,我也试图让 shadowbox 保持在同一个地方。 我尝试以百分比而不是像素为单位来制作尺寸,但我不知道应该使用哪种属性组合。

这是我想要实现的结果:来自这里的外部阴影框效果http://www.harpersbazaar.com/

#shadowbox {
margin: 5px 450px 5px;
box-shadow: 0px 0px 5px rgba(150, 150, 150, 0.75);
position: relative;
z-index: 0;
width: auto;
border-top: 1px solid rgb(223, 223, 223);
initialHeight: 100%;

这是实现它的页面:http://filldevoid.com/test/ (在同一个谷歌浏览器中显示不同,但在不同的计算机上显示不同))

(我希望阴影框与内容位于同一位置(我的意思是,在设计中位于同一位置,即使我放大)我希望内容很好地位于框内,例如harpersbazar 示例。)

最佳答案

添加这个:

#shadowbox{


    width: 970px;
    left: 50%;
    margin-left: -485px;


}

关于html - 放大/缩小时如何使阴影框保持在同一个位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17740748/

相关文章:

html - 按 x 轴滚动

html - flex-items 空间没有在小屏幕上分配

javascript - 出于某种原因,Javascript 甚至在我的 HTML/CSS 页面加载之前加载

jquery - 如何防止填充传播到嵌入式表

css - 在 div 中平均分配 ul 列表

php - 使用 CSS 设置 PHP 样式

php - 在 WooCommerce 管理员订单项上显示 "product short description"

wordpress - 这个与 Facebook 相关的 FB.NativeExtensions.onready 控制台错误是什么,我该如何解决?

html - 有没有办法更改 CSS 中的类名,并且 HTML 页面中找到的所有实例都链接到 CSS?

javascript - 移动设备上的堆栈布局不同