时间戳

首页 > 解决方案 > 在 Outlook 365 上呈现复杂的 div

outlook-addin - 在 Outlook 365 上呈现复杂的 div

问题描述

我正在为 .Net Framework 项目开发 Outlook 插件。我希望在电子邮件正文中显示如下元素： 在此处输入图像描述

这个 div 是由代码生成的：

                        <div ng-repeat="dateGroup in timeLine.DateGroups">
                            <div class="circle color{{dateGroup.ColorId}}Solid whiteBorder" ng-style="{'left': dateGroup.Offset + 'px', 'top': (timeLine.CenterLineTop + 1) + 'px', 'width': timeLine.DotWidth + 'px', 'height': timeLine.DotWidth + 'px'}"></div>
                            <div class="labelLine colorLine{{dateGroup.ColorId}}" ng-style="{'left': dateGroup.LineOffset + 'px', 'top': dateGroup.LineTop + 'px', 'width':':1px','height' : dateGroup.Height + 'px'}"></div>
                            <div ng-if="dateGroup.TextDirection == 0" class="entryLabel" ng-style="{'left': dateGroup.LabelOffSet + 'px', 'top' : dateGroup.LabelTop + 'px', 'width' : '450px !important'}">
                                <div ng-repeat="entry in dateGroup.Entries" style="position:relative;">
                                    {{entry.EventDate | date:'MMM d'}} : {{entry.EventName}}
                                </div>
                            </div>
                            <div ng-if="dateGroup.TextDirection == 1" class="entryLabel" ng-style="{'text-align':'right', 'left': dateGroup.LabelOffSet + 'px', 'top': dateGroup.LabelTop + 'px', 'width':'450px !important'}">
                                <div ng-repeat="entry in dateGroup.Entries" style="position:relative;">
                                    {{entry.EventDate | date:'MMM d'}} : {{entry.EventName}} <br />
                                </div>
                            </div>
                        </div>
                        <div ng-repeat="monthlabel in timeLine.TimeLineMonthLabels">
                            <div ng-if="monthlabel.MonthId == 12" class="monthLabel" ng-style="{'border':'none', 'left' : monthlabel.Offset + 'px' ,'top' : timeLine.MonthLabelTop + 'px' , 'width' : timeLine.MonthSectionWidth  + 'px'}">{{monthlabel.MonthLabel}}</div>
                            <div ng-if="monthlabel.MonthId != 12" class="monthLabel" ng-style="{'left' : monthlabel.Offset + 'px' ,'top' : timeLine.MonthLabelTop + 'px' , 'width' : timeLine.MonthSectionWidth  + 'px'}">{{monthlabel.MonthLabel}}</div>
                        </div>

                        <div ng-if="timeLine.TodayLineOffset > 0" class="todayLine" ng-style="{'height': timeLine.TodayLineHeight + 'px', 'top': timeLine.TodayLineTop + 'px', 'left': timeLine.TodayLineOffset + 'px'}"></div>
                        <div ng-if="timeLine.TodayLineOffset > 0" class="todayLabel" ng-style="{'width': timeLine.TodayLabelWidth + 'px', 'top': timeLine.TodayLabelTop + 'px', 'left': timeLine.TodayLabelOffset + 'px'}">Today</div>

我遇到的问题是 Outlook 365 不支持 HTML 和 css 属性，这使得重新渲染这个 div 在 Outlook 上有点困难。网站到图像是我也在考虑的事情，但我还没有找到一种有效的方法来做到这一点。感谢您对我如何在 Outlook 上呈现这一点的见解。

标签： outlook-addin

解决方案

应使用表格标签创建电子邮件模板。很多时候我们会遇到div没有正确对齐的情况，我们可以通过在table标签中显示数据来解决这个问题。

推荐阅读