防止网站调整大小答案

【问题标题】：Prevent website from resizing防止网站调整大小
【发布时间】：2013-09-29 18:58:06
【问题描述】：

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

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

为了显示这个问题，我附上了两张截图。

另一个问题：屏幕可以垂直滚动，这不应该是因为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;
    }

代码有很多冗余，但这是第二要务，因为客户端首先需要显示正确。

谢谢大家。

【问题讨论】：

标签： css html

【解决方案1】：

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

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

【讨论】：

我觉得我可能不得不从头开始重新设计整个网站。因为问题太多了。 min-width 不起作用，知道为什么吗？我所做的只是在我的 CSS 中添加 <body> 样式并使其成为 min-width:1280px;。它仍在调整大小。

【解决方案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 更改所有 margin-left:3px;到

margin-left:0.5000%;

【讨论】：

我同意。最后，我最终将不得不重新设计网站，但对于旧代码的临时修复，我仍然需要建议