Question

目前，我正在开发一个客户的项目来构建时间表/计费系统，我的一个关键任务是建立一个良好的网格布局，将数据显示在正确的位置。我们还没有决定我们将使用哪个服务器端编程平台将用于这个系统（因此它是普通的html）。作为草拟客户要求的一部分，客户希望与我们合作，在实际实施开始之前首先获得html布局的美感和外观......

http://cms.tmaarchive.com.au/timesheet-allemployee.html

无论如何我离题了。如果你看一下网格的第一行，你会发现有一个绿色的“Approve”和红色的“Reject”按钮。在拒绝按钮旁边，背景中有一小块蓝色背景颜色。我们意识到这是不正确的，我们需要修复这个网格布局问题。

在我调查的时候，我意识到这是一个响应式网页设计问题，因为我在我的显示器屏幕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;">
    &nbsp;
    <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>

如果可以的话，请随意提出批评，这样我就可以学习如何进一步提高我的响应式网页设计技能。

Answer 1

使用bootstrap或metroui，响应的标准版本，在这里检查网格系统

   http://getbootstrap.com/css/#grid

如何从头开始正确设计Web响应网格（如果可能）

1 个答案: