在Outlook 365上呈现复杂的div

Question

我正在为.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属性，这使得在Outlook上重新呈现此div有点困难。我也正在考虑将网站图像化，但是我还没有找到一种有效的方法来做到这一点。感谢您对我如何能够在Outlook中呈现此问题的见解。

Answer 1

电子邮件模板应使用表格标签创建。很多时候，我们将面临div对齐不正确的情况，我们可以通过在表标签中显示数据来解决此问题。