html - Windows 8水平设计中的CSS间距问题

Question

我的一个设计有问题。 我创建了一个非常类似于 Windows 8 磁贴的设计，但有时会出现一个问题。

.row 和.large-* 有时在它们包含的元素的顶部之间有一些神秘的间隙。 没有任何应该导致它的填充或边距，但它正在发生。

我做了一个 fiddler 的例子来展示它的效果。 请有人看看它并告诉我我做错了什么:

http://jsfiddle.net/34pk327u/

这是呈现之前的 HTML:

<div class="row">
    <a class="back" href="/"><i class="fa fa-arrow-circle-left"></i></a>

    <section class="large-4 columns">
        <h1 class="column-title">Orders <small>quick search</small></h1>

        <form name="orderFrom" role="form" ng-submit="customerServices.orderSearch()">
            <div class="row collapse">
                <div class="small-10 columns typeahead-icon">
                    <input type="text" ng-model="customerServices.searchTerm" placeholder="Search" typeahead="item for items in customerServices.autoComplete() | filter:$viewValue" typeahead-loading="customerServices.loading" typeahead-min-length="2">
                    <i ng-show="customerServices.loading" class="fa fa-spinner fa-spin"></i>
                </div>
                <div class="small-2 columns">
                    <button type="submit" class="button postfix">Go</button>
                </div>
            </div>
        </form>
    </section>

    <section class="tile-column large-8 columns" tile-column>
        <h1 class="column-title">Recent orders</h1>

        <div class="loading" ajax-loader ng-show="customerServices.recent.loading"></div>

        <div class="alert alert-box" ng-show="!customerServices.recent.loading && customerServices.recent.data.length === 0">
            No records have been found that match your search.
            <a href="#" class="close">&times;</a>
        </div>

        <a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.recent.data" id="{{order.orderNumber}}">
            <div class="text">
                <strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
                <span ng-bind="order.raisedBy"></span><br />
                <span ng-bind="order.orderNumber"></span><br />
                <span ng-bind="order.getDescription()"></span><br />
            </div>
        </a>
    </section>

    <section class="tile-column large-8 columns" tile-column>
        <h1 class="column-title">Sync failures</h1>

        <div class="loading" ajax-loader ng-show="customerServices.failures.loading"></div>

        <div class="alert alert-box" ng-show="!customerServices.failures.loading && customerServices.failures.data.length === 0">
            No records have been found that match your search.
            <a href="#" class="close">&times;</a>
        </div>

        <a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.failures.data" id="{{order.orderNumber}}">
            <div class="text">
                <strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
                <span ng-bind="order.raisedBy"></span><br />
                <span ng-bind="order.orderNumber"></span><br />
                <span ng-bind="order.getDescription()"></span><br />
            </div>
        </a>
    </section>
</div>

更新 1

我已经更新了 fiddle 并添加了一些边框，以便您可以看到问题:

http://jsfiddle.net/34pk327u/2/

如果您查看快速搜索，它看起来像是在行顶部下方 40 像素(左右)处，但其他列在正确的位置。

Answer 1

我真的不明白你指的是什么“神秘的差距”，但你可以尝试将 padding: 0; 添加到 .row 和 .large-*