我正在尝试在主要内容 div 之外做一些装饰， 如果窗口很小，那将被隐藏。
我想了想想出了下面的标记，(你可以复制粘贴看看)， 这是我现在能想到的最好的。然而问题是，因为我使用了百分比边距，装饰在调整大小时变得不稳定和摇晃，有时甚至踩到内容 div。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
那么，您能否推荐一些不使用百分比边距的其他方法，使其更加灵活……？谢谢!
编辑:
这是在谷歌浏览器中调整大小时发生的情况:
最佳答案
由于浏览器必须根据父级的宽度变化重新计算边距，这是一种预期的行为。
如果你想让内容集中在屏幕上而不使用 max-width、min-width 和边距作为百分比，并且没有任何元素应该是受文档流中 .wrap 位置的影响，您可以这样做:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
这将在任何情况下水平集中内容。
希望对您有所帮助。
关于css - 主 div 之外的装饰使用 CSS 不稳定......？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10471053/