4.3.4. styling

根据您拥有的服务数量，为生成的标记添加一些最终连接。在这个示例中有两个，所以 service-column div 的 CSS 代码将是：

.service-column {
    float: left;
    margin-left: 10%;
    width: 45%;
}
.service-column:first-child {
  margin-left: 0;
}

.service-column {
    float: left;
    margin-left: 10%;
    width: 45%;
}
.service-column:first-child {
  margin-left: 0;
}

Copy to Clipboard

Toggle word wrap

在这个示例中，我们使用基于百分比的布局在包含 div 的尺寸上动态地分配该列基础的宽度。

现在，您应该已拥有一个正常工作且看好的多个服务订阅页面。恭喜！

如果您想以特定顺序显示列，请尝试使用条件表达式(if/else/case)条件条件表示服务名称或其他您已知的值。

返回顶部