0

我正在尝试在主要内容 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>

那么，您能否在不使用百分比边距的情况下推荐其他方式以使其更灵活..？谢谢！

编辑：

这是在 Google Chrome 中调整大小时发生的情况：

这就是谷歌浏览器在调整大小时发生的事情

4

2 回答 2

0

As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.

If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this: 

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;                
        }

This will centralize the content horizontally in every situation.

Hope it helps.

于 2012-05-06T16:16:26.110 回答
0

清除你的花车：

   <div>
     <div class="left"></div>
     <div class="right"></div>
    <div class="clear"></div>
    </div>
    <style>
    .clear{clear:both;}
    </style>
于 2012-05-06T13:57:56.663 回答