0

我有一个不久前制作的网页，在编码时我并没有考虑响应性并使其响应性被证明是一个问题。

当窗口处于原始宽度（当前设置为最小宽度）时，页面如下所示： 在此处输入图像描述

当窗口在 960px 和 1380px （我的最大宽度）之间时，我在页面右侧看到一个奇怪的中间白色边框： 在此处输入图像描述

当窗口在 1380px 或以上时，页面看起来像这样： 在此处输入图像描述

请注意，您可能需要打开图像位置才能看到白色 stackoverflow 背景上的边框！

我已经尝试了很多事情，例如将浮动更改为 margin-left margin-right align，以及更改交替单元格的浮动，但我无法得到任何工作。我需要在调整页面大小时使单元格等间距。

这是我当前列表项的CSS；

#server_features li{
    width:414px;
    height:200px;
    padding:10px;
    margin:10px;
    margin-top:20px;
    margin-bottom:20px;
    float:left;
    border-width:3px;
    border-style:solid;
}

如果您需要更多信息，请随时询问。

4

1 回答 1

1

工作示例jsfiddle 更新示例 首先：为 ul 设置

overflow: hidden;

并删除

position absolute;

接下来删除您的最大和最小宽度并使用媒体查询在媒体查询中设置您的 ul 宽度 (margin-left + margin-right + bodrer-left + border-right + padding-left + padding-right + width) 在您的示例宽度一列是 460 像素，两列是 920 像素，三列是 1380 像素等。我用了你的例子，我改变了我上面写的内容，这样你就可以看到它是如何工作的。

于 2015-01-15T20:30:36.547 回答