Question

我正在开发我的第一个Meteor（v1.2.1）项目，这个网页将显示带有动态样式的html元素的三个网格部分。我认为我已经正确地实现了单独的网格项目样式，但我感到困惑的是为什么整体页面布局与我期望的那样不同。说实话，我对网页设计基础知识的了解，比如HTML＆amp; CSS很差，所以可能有一个我无视的简单解决方案。在此先感谢您的帮助。

所需的布局需要在每组之间进行明确的划分，并且看起来像这样：

＆＃34;标题＆＃34;

Foo Set：
（所有foo的网格）

酒吧套装：
（所有栏的网格）

Baz Set：
（所有巴兹的网格）

当我尝试使用模板和辅助函数执行此操作时，我得到了这个：

第一个h1标题，＆＃34; Foo Set＆＃34;以及相关网格的位置正确，但后续的标题和网格也没有区分我想要的方式。

理想情况下，h1标题应该保持不变，并且网格可以根据浏览器窗口大小扩展或收缩每行显示的网格项数。在DevTools Elements视图中，我看到一些对我没有意义的事情。为什么＆＃34; Bar Set＆＃34;的h1标签？将Foo网格的尺寸放在它上面？

每个div和h1都会发生这种情况。它们似乎引用了它们之前的任何元素的维度。此外，每个网格没有ID的div具有宽度值，但其高度为零。我的假设是这些div的高度基于显示的网格项数。

这是我的代码，减去server.js和statusLookup.js文件：
viewSets-client.js：

if (Meteor.isClient) {

    Meteor.subscribe('units');

    Template.body.helpers({

        foo: function () {
            return Units.find({TYPE: 'FOO'}, {sort : {ORDERVALUE:1}}).fetch();
        },
        bar: function () {
            return Units.find({TYPE: 'BAR'}, {sort: {ORDERVALUE:1}}).fetch();
        },
        baz: function () {
            return Units.find({TYPE: 'BAZ'}, {sort: {ORDERVALUE:1}}).fetch();
        }
    });

    Template.set.helpers({

        getBackgroundColor: function (elem, status) {
            return Meteor.statusLookup(elem, status);
        },
        getTextColor: function (elem, status) {
            return Meteor.statusLookup(elem, status);
        }
    });
}

viewSets.html：

<head>
  <title>Set List</title>
</head>
<body>
    <div class="container">
        <header>
            <h1>All Sets</h1>
        </header>

        <div id="fooDiv">
            <h1>Foo Set:</h1>
            <div>
                {{#each foo}}
                    {{> set}}
                {{/each}}
            </div>
        </div>
        <div id="barDiv">
            <h1>Bar Set:</h1>
            <div>
                {{#each bar}}
                    {{> set}}
                {{/each}}
            </div>
        </div>
        <div id="bazDiv">
            <h1>Baz Set:</h1>
            <div>
                {{#each baz}}
                    {{> set}}
                {{/each}}
            </div>
        </div>

    </div>
</body>

<template name="set">

        <div class="grid-item" style="background:{{getBackgroundColor 'isBackground' STATUS }}; color:{{getTextColor 'isText' STATUS}}"><span>{{UNIT}}</span></div>

</template>

viewSets.css：

html, body {
  font-family: sans-serif;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 0;
  margin: 0;

  font-size: 14px;
}

header {
  background: #d2edf4;
  background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  padding: 20px 15px 15px 15px;
  position: relative;
}

.grid-item {
  width: 75px;
  height: 30px;
  float: left;
  text-align: center;
  vertical-align: middle;
  margin: 1px;
  font-weight: bold;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: 30px;
}

请帮助我了解如何正确格式化我的html和CSS规则，以便网格部分分开。感谢您的帮助。

Answer 1

你正在浮动你的元素，所以事情在下一个“免费”点呈现。

要让你的h1s在正确的位置，你需要一个“clearfix”。这将在新的一行开始

请参阅What is a clearfix?

为什么Meteor以这种方式呈现网格html？

＆＃34;标题＆＃34;

1 个答案: