1

現在修正中のWebサイトには、インラインで表示される2つのdivがあります。

ブラウザー ウィンドウのサイズを変更すると、右側の div はインラインのままではなく、最初の div の下に収まるように自動的に配置されます。私の質問は、このサイズ変更を防ぎ、すべての画面サイズで標準に保つ方法です。

この問題を表示するために、2 つのスクリーンショットを添付しました。

最大画面サイズ時

ブラウザウィンドウの縮小について

別の問題: の高さが 100% を超えていないためhtml、画面は垂直にスクロールできません。bodydiv

2 つの主要な div の CSS は次のとおりです。

#menu{
  position:absolute;
  width:15%;
  height:600px;
  float:left;
  margin-top: 10px;
  margin-left: 40px;
}

#content{
  position: absolute;
  height:600px;
  width:73%;
  float:left;
  margin-top: 10px;
  margin-left: 290px;
}

内側の 4 div の CSS は次のとおりです。

.gallery-image-rest{
    background: url('../images/thumbs/rest.jpg');
    position: relative;
    height:600px;
    width:24%;
    float: left;
    margin-left: 15px;
    /*display: inline-block;*/
    text-align: center;
    }
.gallery-image-replenish{
    background: url('../images/thumbs/Replenish.jpg');
    position: relative;
    height:600px;
    width:24%;
    float: left;
    margin-left:3px;
    /*display: inline-block;*/
    text-align: center;
    }

.gallery-image-rejuvenate{
    background: url('../images/thumbs/Rejuvenate.jpg');
    position: relative;
    height:600px;
    width:24%;
    float: left;
    margin-left:3px;
    /*display: inline-block;*/
    text-align: center;
    }

.gallery-image-reunite{
    background: url('../images/thumbs/reunite.jpg');
    position: relative;
    height:600px;
    width:24%;
    float:left;
    margin-left:3px;
    /*display: inline-block;*/
    text-align: center;
    }

コードには多くの冗長性がありますが、クライアントは何よりもまず表示を正しくする必要があるため、それは 2 番目の優先事項です。

みんなありがとう。

4

2 に答える 2

5

min-width要素に aを指定する<body>と、自動サイズ変更が防止されます。

body {
    min-width: 1280px; // change width as needed to fit your page
}
于 2013-09-29T09:16:48.220 に答える
1

一部のボックス内にテキストを保持するためにサイズを一定の比率に制限すると、一部の人々にとってサイトがより使いづらくなります。私はブラウザーをデフォルトで 125% ズームに設定しているので、訪問するほとんどのサイトのテキストを読むのは困難ですが、読むことができます。理想的にはもっと大きくしたいのですが、非常に多くのサイトがこれを考慮しておらず、サイトが使用できなくなります. 視力の悪い人や、最近は小さな文字を読むのが難しくなっている高齢者がいるという事実は、彼らには決して思い浮かばないようです. 彼らはそれを読むことができるので、すべてが世界に合っています。

デザインを変更する場合は、固定の PX 値ではなく、コンテンツの幅にパーセンテージを使用し、マージン/パディングにもパーセンテージを使用することをお勧めします。そうすれば、サイトの一般的なレイアウトが保持され、テキストがズームされて、私のような人にとって読みやすくなります.

#menu{
    position:absolute;
    width:15%;
    height:600px;
    float:left;
    margin-top: 1%;
    margin-left: 0.5000%;
}

#content{
    position: absolute;
    height:600px;
    width:73%;
    float:left;
    margin-top: 1%;
    margin-left: 16%;
}

そして、内側の div ごとにすべての margin-left:3px; を変更します。に

margin-left:0.5000%;
于 2013-09-29T09:44:07.850 に答える