小编Sco*_*ott的帖子

在过去的几个小时里我一直在进行display: grid测试，但还没有找到如何将数据按行分组的有效示例（这似乎是一个非常常见的用例）。我正在尝试用 CSS 网格替换表格布局，但无法完全破解它。

考虑这个 HTML：

<div class="wrapper">
    <div class="row">
         <div class="col1">Short Data</div>
         <div class="col2">Very Much Longer Data</div>
    </div>
    <div class="row">
         <div class="col1">Short Data</div>
         <div class="col2">Regular Data</div>
    </div>
</div>

还有这个CSS：

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

上面的 CSS 只会影响行，但不会布局列。如果我在每行内嵌套另一个网格，则数据点没有关系，并且不会一致扩展（直到subgrid）。

这对我来说很重要有几个原因：

1. 我希望每一行都是一个 React 组件，它需要一个外部包装标签。
2. 我正在循环一个未知长度的数据集，Reactkey在每次迭代时都需要 a 。
3. 我想创建按行响应的斑马条纹或悬停事件。
4. 我的强迫症不喜欢所有的孩子都住在彼此旁边而不进行某种分组。

我应该只使用good-ol 表吗？

嘿伙计们,我有一个不具有唯一身份的模特.每个型号也有一个日期.我想返回所有结果,但只返回共享ID的每一行的最新结果.该模型看起来像这样:

class MyModel(models.Model):
    my_id = models.PositiveIntegerField()
    date  = models.DateTimeField()
    title = models.CharField(max_length=36)


## Add some entries
m1 = MyModel(my_id=1, date=yesterday, title='stop')
m1.save()

m2 = MyModel(my_id=1, date=today, title='go')
m2.save()

m3 = MyModel(my_id=2, date=today, title='hello')
m3.save()

现在尝试检索这些结果:

MyModel.objects.all()... # then limit duplicate my_id's by most recent

结果应该只有m2和m3

嘿伙计们,我知道这个问题已经提出了很多次,但我还没有完全实现.正如您在下面看到的,我有一个表单,我可以动态地告诉您要创建多少行.如何创建"添加行"链接,告诉视图要创建多少行？我真的很想在不增加网址的情况下做到这一点......

# views.py
def myView(request):
    if request.method == "POST": 
        form = MyForm(request.POST, num_rows=1)

        if form.is_valid():
            return render_to_response('myform_result.html', context_instance=RequestContext(request))
    else:
        form = MyForm(num_rows=1)

    return render_to_response('myform.html', {'form':form}, context_instance=RequestContext(request))


# forms.py
class MyForm(forms.Form):
    def __init__(self, *args, **kwargs):
        num_rows = kwargs.pop('num_rows',1)
        super(MyForm, self).__init__(*args, **kwargs)

        for row in range(0, num_rows):
            field = forms.CharField(label="Row")
            self.fields[str(row)] = field


# myform.html  http://example.com/myform
<form action="." method="POST" accept-charset="utf-8">
    <ul>
        {% for field in form %}
            <li style="margin-top:.25em">
                <span class="normal">{{ field.label }}</span> 
                {{ field }}
                <span class="formError">{{ field.errors }}</span> …

我完全被难住了，希望任何能把我踢向正确方向的人伸出援助之手。我正在尝试创建组g和其中的单个矩形。这join对父母来说很有用g，但它并不能创造孩子。我缺少什么？（我正在考虑加入！）

我尝试join用 an替换enter().append('g')也无济于事，所以我错过了一些东西。

这是一个jsfiddle。

var svg = d3.select("div#canvas")
                    .append("svg")
                    .attr("width", '100%')
                    .attr("height", '100%');

let NodeData = [
    {
        'x': 20,
        'y': 20,
        'id': 'abc',
        'fill': '#D4C2F1'
    },
    {
        'x': 20,
        'y': 80,
        'id': 'def',
        'fill': '#B3D2C5'
    },
];

function updateNodes(data) {

    var groups = svg.selectAll('g').data(data)
                    .join('g')
                        .attr('node-id', function (d) { return d.id; })
                        .attr('transform', function (d) { return `translate(${d.x}, ${d.y})` });

    var rects = groups.selectAll('rect')
                    .data(function (d) { …

我要求作为最后的努力来遵守我的良心并用CSS做到这一点.我想使用CSS来布局这个简单的表单,但我花了两个小时试图获得它并且总是最终出现对齐问题.我用十分钟就用它做了.

我需要右对齐标签,名称行分为两部分,标签与输入文本正确垂直对齐,以及输入的所有右边缘排成一行.在CSS中做什么需要做什么？

编辑:添加我的CSS,看看我哪里出错了.

这就是我用CSS获得的:

.form_row {
    width: 500px;
}
.form_row label {
    text-align: right;
    width: 150px;
    float: left;
    margin-top: 6px;
    padding-right: 6px;
}
#id_first_name, #id_last_name {
    width: 130px;
}
#id_email, #id_password {
    width: 300px;
}

标记:

<div class="form_row">
    <label for="id_first_name">Name:</label>
    <input id="id_first_name" type="text" name="first_name" />
    <input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
    <label for="id_email">Email:</label>
    <input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
    <label for="id_password">Password:</label>
    <input id="id_password" type="password" name="password" />
</div>

结果如下:

感觉这里完全是个n00b。我的页面很短，无法垂直填满整个页面。由于某种原因，我background-color在标签上的设置body不会继续超过页面上的最后一个元素。

body {
  background-color: #000;
}

什么可能导致这种情况？