0

HTML ページを開発するときはいつでも、ウィンドウのサイズ変更で問題が発生します。ページの配置が乱れます。1 つの要素またはタグが他の要素と重なっています。ページのサイズを変更してもページは同じままで、スクロールバーが表示されるようにしたいです。誰かが解決策を提案してくれます。これに使用するのに適したスタイル属性 (位置、オーバーフロー)

4

4 に答える 4

2

本体にa を設定しwidthます (または、より好ましくは a min-width)

于 2012-05-25T09:40:48.413 に答える
0

問題は、要素を相対位置（任意の要素のデフォルトの位置）に配置することです。つまり、現在の画面サイズに対して相対的な位置に配置することです。位置を絶対に変更することができ、それらは移動しません。これにより、css忍者でない場合、制御が失われる可能性があります。illは、要素を制御する方法について、いくつかのクールなテクニックを示しています。

ヒント1：タグをラップします！ラップされた要素はそのままになります！例：

html =>

<div id="box_wrapper">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

css =>

#box_wrapper {
  margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
  height: 300px; /*what ever height you want*/
  width: 1200px; /*what ever width you want*/
 }
.box {
  /*what dimensions you want*/
 }

これはオブジェクトを所定の位置に保持するための優れた方法であり、オーバーフローを指定した場合、オブジェクトがラッパー要素を離れることはありません。

ヒント2：位置：絶対; これは厄介になる可能性があることに注意してください。

画面の隅にロゴを配置するときは絶対位置を使用して、画面のサイズを変更してもロゴが隅に残るようにします。親要素に指定された幅を必要としないので、これはクールです。

html

<div class="header">
 <img src="/images/logo.png" alt="page_logo">
 <div id="login_button">
   /*......*/
 </div>
</div>

css

.header {
  width: 100%
  height: 150px;
  border: 1px solid #ccc; 
}
.header img{
  position: absolute;
  margin: 0px; /*position: absolute must have a margin even if its 0*/
  float: left;
  height: 150px;
}
#login_buttons {
 float:left;
 position: absolute right;
 margin-right: 5px;
}

この例では、左上にロゴを配置し、右側にログインボタンを配置します。その後、画面サイズを変更すると、必要な場所にロゴが保持されます。

ここにチュートリアル全体を書きたくはありませんが、これらのヒントは、複数の画面サイズに適応するソリッドページの設計に役立つはずです。コードが表示されない場合に問題が発生する可能性があるかどうかを推測するのは難しいですが、これがお役に立てば幸いです。

于 2012-05-25T12:25:27.537 に答える
0 
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
 pageWidth = document.getElementById('page').offsetWidth;

pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>

サイズ変更されたブラウザーウィンドウのサイズに基づいて、ページの読み込み時に本文の幅を % ではなくピクセルに修正する必要があります。

于 2013-12-14T17:00:27.563 に答える
0

これが必要かどうかはわかりませんが、おそらく：

overflow:auto;

あなたが探しているものです

于 2012-05-25T09:41:06.650 に答える