Question

在我正在修复的网站上，有两个显示内联的div。

在调整浏览器窗口大小时，右侧的div会自动对齐以适合第一个div，而不是保持内联。我的问题是如何防止调整大小并使其在所有屏幕尺寸上保持标准。

要显示此问题，我附上了两个屏幕截图。

On maximum screen size

On reducing the browser window

另一个问题：屏幕是垂直可滚动的，因为html，body或任何div的高度不超过100％

我对两个主要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;
    }

代码有很多冗余，但这是第二优先级，因为客户端需要显示在其他任何事情之前是正确的。

谢谢你们。

Answer 1

为min-width元素指定<body>会阻止自动调整大小。

body {
    min-width: 1280px; // change width as needed to fit your page
}

Answer 2

由于您希望将文本保留在某些框中，因此将大小限制为固定比例会使某些人更难以使用该网站。默认情况下，我的浏览器设置为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，改变所有边距：3px;到

margin-left:0.5000%;

防止网站调整大小

2 个答案: