javascript - 在 2 行中动态创建 div 高度

Question

所以我试图让 div toolLeft 的高度与 toolRight 的 div 高度匹配，并且与 beneLeft 和 beneRight 相同。下面是我的代码，但只获取 beneLeft 高度以更改以匹配 beneRight。查看了一些我可能出错的示例，但没有看到。最重要的是，我的功能变得非常臃肿。最好的方法是什么？

代码:

<div class="container">
    <div class="homeHead col-md-12">
        <h2>Welcome to the Navia Banefits participant portal, {{ ppt.Ppt.firstName }}!</h2>
        <p>{{ ppt.Ppt.coName }} ({{ ppt.Ppt.coCode }})</p>
        <div class="alerts">
            <div id="example" ng-app="fpsClientApp">
                <div class="demo-section k-header">
                    <div ng-controller="pptController">
                        <div kendo-tab-strip k-content-urls="[ null, null]" id="alertTabs">
                            <!-- tab list -->
                            <ul>
                                <li class="k-state-active">special messages</li>
                                <li>outstanding swipes</li>
                                <li>recent denials</li>
                                <li>upcoming dates</li>
                                <li>account alerts</li>
                            </ul>
                            <div class="alertCompany">
                                <p> {{ ppt.CompanyAlert.value }} </p>
                            </div>
                            <div class="alertSwipes">
                                <p ng-repeat="swipes in ppt.Swipes"><span class="col-md-2">{{swipes.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
                            </div> 
                            <div class="alertDenials">
                                <p ng-repeat="denials in ppt.Denials"><span class="col-md-2">{{denials.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{denials.descr}}</span></p> 
                            </div>
                            <div class="alertDates">
                                <p ng-repeat="dates in ppt.Dates"><span class="col-md-2">{{dates.key|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{dates.value}}</span></p>
                            </div>
                            <div class="alertAccounts">
                                <p ng-repeat="date in ppt.Alerts" ><span class="col-md-2">{{date.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- begin Benefit Tile cards -->

    <div class="beneArea">
        <div class="beneLeft col-md-3">
            <div>
                <h2>My Benefit Statements</h2>
            </div>
            <div>
                <p>Click on a benefit tile to access more detailed information.</p>
            </div>
        </div>
        <div class="beneRight col-md-9">
            <div class="beneTile col-md-3" data-ng-repeat="Benefits in ppt" style="margin: 4px; margin-left: 20px;">
                <div class="beneHead">
                    <p>{{ ppt.Benefits[0].name }}</p>
                </div>
                <div class="beneDetails">
                    <div class="beneText">
                        <p class="beneDesc">Current Balance</p>
                        <p class="beneMoney">{{ ppt.Benefits[0].balance }}</p>
                        <p class="beneDesc">Annual Election</p>
                        <p class="beneMoney">{{ ppt.Benefits[0].annualAmt }}</p>                        
                    </div>
                    <div class="beneFooter" style="clear: both;">
                        <p><span>Last day to incur expenses:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
                        <p><span>Last day to submit claims:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>                    
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- end Benefit Tile cards -->

    <!-- being Tool Tile cards -->

    <div class="toolArea">
        <div class="toolLeft col-md-3">
            <div>
                <h2>My Tools</h2>
            </div>
            <div>
                <p>Click on a tile to access and maintain your account.</p>
            </div>
        </div>
        <div class="toolRight col-md-9">
            <div class="tools">
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/submiticon.svg" >
                        <p>Submit a Claim for Reimbursement</p>
                    </a>
                </div>
                <div class="toolTile col-md-3">
                    <a href="#/commuterOrder">
                        <img src="ppt/assets/toolIcons/commutericon.svg" >
                        <p>GoNavia Commuter</p>
                    </a>
                </div>
                <div class="toolTile col-md-3">
                    <a href="#/accessHsa">
                        <img src="ppt/assets/toolIcons/hsa.svg" >
                        <p>Access my HSA</p>                        
                    </a>
                </div>        
                <div class="toolTile col-md-3">
                    <a href="#/clearSwipe">
                        <img src="ppt/assets/toolIcons/clearswipe.svg" >
                        <p>Clear a Swipe</p>                        
                    </a>
                </div>   
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/naviconnect.svg" >
                        <p>Access NaviConnect</p>
                    </a>
                </div>
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/naviapp.svg" >
                        <p>Manage My Navi App</p>                        
                    </a>
                </div>
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/formsdocs.svg" >
                        <p>Forms and Documents</p>                        
                    </a>
                </div>        
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/navicommuter.svg" >
                        <p>Access my NaviCommuter</p>                        
                    </a>
                </div>                   
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/requestnewcard.svg" >
                        <p>Request a new NaviCard</p>                        
                    </a>
                </div>
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/updateprofile.svg" >
                        <p>Update my Profile</p>                        
                    </a>
                </div>
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/onlineenrollment.svg" >
                        <p>Online Enrollment</p>                        
                    </a>
                </div>        
                <div class="toolTile col-md-3">
                    <a href="#/claimEnter">
                        <img src="ppt/assets/toolIcons/recurring.svg" >
                        <p>My Recurring Claims</p>                        
                    </a>
                </div> 
            </div>
        </div>
    </div>

    <!-- end Tool Tile cards -->

</div>

<script>
    $(document).ready(function () {
        $("#alertTabs").kendoTabStrip({
            tabPosition: "left",
            animation: { open: { effects: "fadeIn" } }
        });
    });

    var leftBeneHeight = $(".beneLeft").height();
    var rightBeneHeight = $(".beneRight").height();

    if (leftBeneHeight > rightBeneHeight) {
        $(".beneRight").height(leftBeneHeight);
    }   else {
        $(".beneLeft").height(leftBeneHeight);
    };    

    var leftToolHeight = $(".toolLeft").height();
    var rightToolHeight = $(".toolRight").height();

    if (leftToolHeight > rightToolHeight) {
        $(".toolRight").height(leftToolHeight);
    }   else {
        $(".toolLeft").height(rightToolHeight);
    };

</script>

抱歉无法提供 fiddle ，因为这也是从私有(private) API 中提取的。

Answer 1

我就是这样做的。

lvar leftToolHeight = $('.toolLeft').height();
var rightToolHeight = $('.toolRight').height();

if (leftToolHeight > rightToolHeight) {
  $('.toolRight').height(leftToolHeight);
} else {
  $('.toolLeft').height(rightToolHeight);
}

对 beneLeft 和 beneRight 做同样的事情。希望对您有所帮助!