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>

それで、あなたはそれをより柔軟にするために、パーセンテージマージンを使用せずに他の方法で男を推薦できますか？ありがとう！

編集：

これは、サイズ変更時にGoogleChromeで発生することです。

これは、サイズ変更時にGoogleChromeで発生することです

4

2 に答える 2

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 に答える
0

ブラウザは親の幅の変更に基づいてマージンを再計算する必要があるため、これは一種の予想される動作です。max-width、min-width

、marginsをパーセンテージで 表示せずにコンテンツを画面上で一元化したい場合で、ドキュメントフローの.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;                
        }

これにより、あらゆる状況でコンテンツが水平方向に一元化されます。

それが役に立てば幸い。

于 2012-05-06T16:16:26.110 に答える