【发布时间】：2014-02-21 14:43:01
【问题描述】：
目前，我正在处理一个客户的项目，以构建时间表/计费系统，我的主要任务之一是构建一个良好的网格布局，将数据显示在正确的位置。我们还没有决定我们将使用哪个服务器端编程平台来用于这个系统（因此它是纯 html 格式）。作为起草的客户要求的一部分，客户希望与我们合作，在开始任何实际实施之前首先获得 html 布局的美感和外观...
http://cms.tmaarchive.com.au/timesheet-allemployee.html
不管怎样，我离题了。如果您查看网格的第一行，您会注意到有一个绿色的“批准”和红色的“拒绝”按钮。在拒绝按钮旁边，背景中有一小块蓝色背景色。我们意识到这是不正确的，我们需要解决这个网格布局问题。
在我调查时，我意识到这更像是一个响应式网页设计问题，因为我的显示器屏幕 1440x900 上没有这个问题。它布置得很完美。但是，如果您将页面放在更宽（或更小）的分辨率上，分别是高度和宽度，那么您会注意到蓝色背景颜色变得越来越明显。由此，我意识到这是没有从一开始就设计 Web 响应式网格的结果。不过，在我自己的辩护中，解决这个问题并不重要，因为我们不确定在从头开始设计网页设计师的模型之后，网格布局会如何出现。一旦我们获得了布局并在我们推进项目的过程中勾勒出基础的基线，那么我们在评估我们的网格稍后将如何变得响应方面变得更加了解。
但看来我必须比预期更早地解决它们。因此，在我们向客户展示之前，我面临着确定解决这个悬而未决问题的最佳行动方案的压力。我听说基于网格的响应式网页有两种方法，即 DIY 和基于框架的，我以前没有做过响应式网页设计，我需要你的建议，这两种方法中的哪一种可以帮助我纠正页面的布局问题（并最终将这个起始基础用于时间表计费系统中的所有其他网格。）
这是有问题的行的布局代码。
<div class="table_row 1">
<div class="table_column" style="width: 110px;">
Steven Kugel
</div>
<div class="table_column" style="width: 110px;">
Mrs Smith
</div>
<div class="table_column" style="width: 60px;">
03.07.2014
</div>
<div class="table_column" style="width: 110px;text-align:center;">
3.5
</div>
<div class="table_column" style="width: 120px;text-align:center;">
80%
</div>
<div class="table_column" style="width: 130px;text-align:center;">
4
</div>
<div class="table_column" style="width: 76px;text-align:center;">
7.5
</div>
<div class="table_column" style="width: 45px;">
1,575
</div>
<div class="table_column" style="width: 126px;background-color: #fff;display:inline-flex;">
<div style="float:left;margin-right: 5px;">
<input type="button" value="Approve" name="APPROVE" style="background-color: #6EBA66;width: 58px; height: 0px; margin-right: 4px; padding-top: 1px;padding-bottom: 18px;font-size:13px;"></div>
<div style="float:left;">
<input type="button" value="Reject" name="REJECT" style="background-color: #D70D1E;width: 58px; height: 0px; margin-right: 4px; padding-top: 1px;padding-bottom: 18px;font-size:13px;"></div>
</div>
</div>
如果可以的话，请随时提出批评，这样我就可以学习进一步提高我的响应式网页设计技能。
【问题讨论】：
标签： html css grid responsive-design