Question

我正在使用Jquery动态构建div，并将其附加到正文或任何元素。在追加之后，当我试图获得它给出的高度0.在Chrome中我检查了它的所有高度属性0.这可能是问题。

这是我追加的代码：

 var template = '<div class="capMainSection"> 
       <div class="CAP"> </div>
       <div class="scrolldiv repeatSection" style="display:none;""> 
         <div class="header sectionheader"> </div> 
           <div class="content"> 
               <div class="leftColumn"> 
                   <div class="show" id="capInfo"> 
                     <div class="label1">CA Contacts:</div> 
                     <div class="label2"><p>CA Lead:<span class="LeadName"></span><span class="LeadEmail"></span></p></div> 
                     <div class="lable3"><p>Lead:<span class="vLeadName"></span><span class="vLeadEmail"></span></p></div>   

                   </div> 
                   <div class="hidden" id="facInfo"> 
                     <div class="label1"><span class="facid"></span><span class="facName"></span></div> 
                     <div class="label2"><span class="city"></span><span class="state"></span><span
 class="country"></span></div> 
                   </div>              </div>
               <div class="rightColumn"> 
                   <div class="rightGroup"> 
                     <div class="groupproto"> 
                       <p><span class="protocolname show"></span>
                       <span class="date_class show"></span></p>
                     </div>
                     <div class="statusClass hidden"></div>
                     <div class="approvedFinding show"></div>
                     <div class="closedFinding show"></div>
                     <div class="verifiedFinding show"></div>
                     <div class="lasActivity show"></div>
                   </div> 
                     <div class="linkButton"> 
                           <input type="button" class="lplinkbutton" value="&gt;">
                     </div> 
               </div>
           </div>
       </div>
     </div>';

我先克隆div然后追加

templateNode = $('.repeatSection').clone(true);
//change the display none to show
$(templateNode).find('.content').attr('id',capRow);
$('.capMainSection').append($(templateNode));

CSS

.content {
clear: both;
font-size: 13px;
}

.leftColumn {
float: left;
width: 40%;
padding: 10px 0 10px 10px;
}

.rightColumn {
float: right;
width: 50%;
padding: 0;
}

Answer 1

试试这个：

.capMainSection {overflow: hidden;}

或者，你可以这样做：

.capMainSection:after {
  content: " ";
  display: block;
  clear: both;
}

Div没有任何高度

1 个答案: