1

クラスのポートフォリオページに取り組んでいます。ブラウザーのサイズが変更されたときに、ブラウザーに合わせて Web ページを調整しようとしています。主にヘッダーにあるナビゲーション リンクです。また、画面がいっぱいのとき、ナビゲーション リンクは右上隅にあります。しかし、ウィンドウを元に戻すと、中央が中央になります。私は何をしますか？どんな助けでも大歓迎です。これが私のコードです。それが役に立ったら。

#header, 
#main, 
#footer{

display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}


<html>

    <head>
        <title></title>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <style type="text/css">
            .auto-style1 {
                text-align: left;
            }
        </style>
    </head>

    <body>
        <div class="auto-style1">
            <div id="header">Header

<h1>Creative Minds Inc.</h1>

            </div>
            <div id="nav">Navigation
                <ul>
                    <li><a href="homepage.html">Homepage</a>
                    </li>
                    <li><a href="#">Tips and Trick</a>
                    </li>
                    </li><a href="aboutme.html">About me</a>
                    </li>
                    <li><a href="#">Get in Touch</a>
                    </li>
                </ul>
            </div>
            <div id="main">Main

<h2>A passion for design and a creative mind.</h2>


<h3>Design, Develop, Dream</h3>

            </div>
            <div id="sidebar">Navigation</div>
            <div id="footer">Footer

<h3>Creative Minds Inc.  Jonathan Mourning</h3>

            </div>
        </div>
    </body>

</html>
4

2 に答える 2

1

のような幅の設定を使用する代わりに、 のようなwidth: 1000px;パーセンテージ値を使用しますwidth: 100%;。しかし、これは予期せぬ問題を引き起こす可能性があるので注意してください。

于 2013-09-03T01:52:03.463 に答える
1

標準のresizeDOM イベントを使用できます。次に

window.onresize = function(event) {
    ...
}

それに応じて、要素の位置とサイズを調整できます。

ただし、一般的には、固定サイズを避け、DOM 要素にパーセンテージ値を指定して、すべての画面サイズと比率で自動的にサイズ変更できるようにすることができます。たとえば、ページが縦向きの場合は、次のように変更widthし100%て、#main要素を常に画面の中央に揃えます。

#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}

コードの例を次に示します: http://jsfiddle.net/TZGXf/4/ フルスクリーンです: http://jsfiddle.net/TZGXf/4/embedded/result/

于 2013-09-03T01:49:12.107 に答える