如何填写此Silverstripe表格中的空白？

Question

我正在使用Silverstripe中的“联系人详细信息”页面。但是，我在为页面开发模板时遇到了问题。

ContactDetails模型中包含许多OurServices和OtherServices。这些服务联系人只是DataObjects，其中包含处理组织中服务的部门的基本联系人详细信息。

我想要实现的是一种灵活的方式来并排显示每种数据类型。每种数据类型在模板中都有自己的列，您可以在此图像中看到：

我遇到的问题是我需要填补左下角的空白。我需要一些方法在这个空间插入一个空。

这是我的模板代码：

<div class="tableContainer">
    <% if $OurServices %>
    <div class="contactTable ourServices">
        <div>
            <div class="contactHeader">
                <h3 class="contact">Our Services</h3>
            </div>
        </div>
        <% loop $OurServices %>
        <div>
            <div class="contactContent">
                <p class="left bold">$Title</p>
                <p class="left">Tel: $Phone</p>
                <p class="left">Email: <a href="mailto:{$Email}">$Email</a></p>
                <% if $Facebook %><p class="left"><a href="{$Facebook}" class="contact" target="blank">Facebook</a></p><% end_if %>
                <% if $DetailURL %><p class="left"><a href="{$DetailURL}" class="contact" target="blank">Find out more</a></p><% end_if %>
            </div>
        </div>
        <% end_loop %>
    </div>
    <% end_if %>
    <% if $OtherServices %>
    <div class="contactTable otherServices">
        <div>
            <div class="contactHeader">
                <h3 class="contact">Other Services</h3>
            </div>
        </div>
        <% loop $OtherServices %>
        <div>
            <div class="contactContent">
                <p class="left bold">$Title</p>
                <p class="left">Tel: $Phone</p>
                <p class="left">Email: <a href="mailto:{$Email}">$Email</a></p>
                <% if $Facebook %><p class="left"><a href="{$Facebook}" class="contact" target="blank">Facebook</a></p><% end_if %>
                <% if $DetailURL %><p class="left"><a href="{$DetailURL}" class="contact" target="blank">Find out more</a></p><% end_if %>
            </div>
        </div>
        <% end_loop %>
    </div>
    <% end_if %>
</div>

这实际上是一个基本的（和令人尴尬的！）逻辑问题，并不是Silverstripe特有的。我似乎无法弄清楚如何接近它。非常感谢任何帮助！

Answer 1

为什么不将表格数据放入标签并相应地设置样式？您可以使用<td colspan="2">...</td>在包含您的内容的任何列上执行此操作。然后，您可以使用CSS在内容的左侧添加填充。

Answer 2

没有人可以告诉你，直到他们将你的css，因为我（个人）不知道 - div的定位方式。 但我会这样做（有2个查询）：

Answer 3

也许可以使用min-height css属性？

替代方案可以是做一些更有意义的事情并计算项目数量，计算出哪个集合有更多以及差异是什么然后将不同数量的项目注入到较短列表的DataList中，然后显示到模板上。实际上，这可能是过度设计的，可能是获得类似结果的更简单方法。