CSS：元素的动态宽度

Question

如果您检查我当前正在处理的网站：
http://4rate.org/

我希望正方形与用户的屏幕宽度均匀对齐，所以一切都会看起来像＃34;居中＆＃34; 两侧没有额外的空间。我可以硬编码宽度以与我自己的屏幕完美匹配，但是那些没有我的屏幕的人都不会看起来很完美。

我发现，例如，如果我在我的sony z3 compact上浏览这个网站，每行将有3个方格，并且有一个相当大的额外空间＆＃34;在屏幕的右侧。

同样的事情适用于不同用户的不同屏幕尺寸。

你会如何解决这个问题？

Answer 1

请尝试以下

通过.ratingdiv更新float:left并添加display:inline-block来更新课程vertical-align:top以修复此问题。

<强> CSS：

.ratingdiv {
    background-color: #f0e0d6;
    border: 1px solid #d9bfb7;
    display: inline-block;
    height: 280px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    vertical-align: top;
    width: 255px;
}

Answer 2

您可能希望使用Javascript框架来实现此目的，或者使用CSS媒体查询。甚至像Bootstrap这样的东西也可以很容易地实现这一点。