1

在我目前正在修复的网站上，内联显示了两个 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;
    }

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

多谢你们。

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 回答