Question

我试图让每个div在同一行中具有相同的高度但是无法做到可以帮助我做这个吗？

我的代码做了什么使得整个div具有相同的高度，但我不想像我想要的表结构，如果连续任何div超过最大高度然后只有该行所有div应该如果身高相同，则不应该

提前致谢

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<link rel="stylesheet" type="text/css" href="http://localhost:8000/css/style.css"/>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
.col-data-ss
{
    border:1px solid;
}
</style>
</head>
<body>
<div class="table-heading">
    <div class="row">
        <div class="col-lg-12">
            <div class="col-lg-3 empty-head data-h">

            </div>
            <div class="col-lg-3 data-expe data-h">
                Experian
            </div>
            <div class="col-lg-3 data-equi data-h">
                Equifax
            </div>
            <div class="col-lg-3 data-trans data-h">
                TransUnion
            </div>
        </div>
    </div>
</div>
<div class="table-data-st">
  <div class="row">
    <div class="col-lg-3">
      <div class="first-col col-data-ss"> Account Name: </div>
      <div class="first-col col-data-ss"> Account Number: </div>
      <div class="first-col col-data-ss"> Account Type: </div>
      <div class="first-col col-data-ss"> Account Status: </div>
      <div class="first-col col-data-ss"> Monthly Payment: </div>
      <div class="first-col col-data-ss"> Date Opened: </div>
      <div class="first-col col-data-ss"> Balance: </div>
      <div class="first-col col-data-ss"> Terms: </div>
      <div class="first-col col-data-ss"> High Balance: </div>
      <div class="first-col col-data-ss"> Limit: </div>
      <div class="first-col col-data-ss"> Past Due: </div>
      <div class="first-col col-data-ss"> Payment Status: </div>
      <div class="first-col col-data-ss"> Comments: </div>
    </div>
    <div  class="col-lg-3">
      <div class="col-data-ss">H &amp; R ACCOUNTS INC kdjsfh k dfkjhd kfjdskfjhdskj fhkjdsh fkjdhf kjhdkjsf h</div>
      <div class="col-data-ss">1000528879d8897897987897897987987897</div>
      <div class="col-data-ss">Collection Department / Agency / Attorney dsfkj hdskjf kdjsjfh kjjdshkjf hkjdsh fjkhdskjfh jkdshkf hkdshf kjhdsjfh jkdshjf hjkdshf jkhdsjkf hjkdsh jkfhjdks hkfjhdsk hfkjdsh kjfhdkjsh fkjhdskjf hkjdsh fjkdhskjf hkjdsh fkjhdskfh kjdshkjf hkjsdhf kjsdhkjf hkdsjhf kjhdskjhf kjshd f</div>
      <div class="col-data-ss">Closed</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">3/1/2012</div>
      <div class="col-data-ss">$4519.00</div>
      <div class="col-data-ss">1 Month</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">$4519.00</div>
      <div class="col-data-ss">Seriously past due date / assigned to attorney, collection agency, or credit grantor's internal collection department</div>
      <div class="col-data-ss">&nbsp;</div>
    </div>
    <div  class="col-lg-3">
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">1000528</div>
      <div class="col-data-ss">Collection Account</div>
      <div class="col-data-ss">Closed</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">8/1/2013</div>
      <div class="col-data-ss">$4519.00</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">$4519.00</div>
      <div class="col-data-ss">Unpaid</div>
      <div class="col-data-ss">MEDICAL
        Unpaid</div>
    </div>
    <div class="col-lg-3">
      <div class="col-data-ss">MED1 02 ST FRANCIS HOSPITAL</div>
      <div class="col-data-ss">1000528</div>
      <div class="col-data-ss">Collection Account</div>
      <div class="col-data-ss">Open</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">8/1/2013</div>
      <div class="col-data-ss">$3519.00</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">&nbsp;</div>
      <div class="col-data-ss">Placed for collection</div>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
     var i=0; 
     $('.row').each(function(){ 
               var highestBox = 0;
               $('.col-data-ss', this).each(function(){
               if($(this).height() > highestBox) 
                      highestBox = $(this).height(); 
               });  
         $('.col-data-ss',this).height(highestBox);

   });  
});
</script>
</body>
</html>

Answer 1

您最终可以通过更改HTML的结构来执行您想要的操作，例如：

<div class="table-data-st">
  <div class="row">
    <div class="col-lg-3">
      <div class="first-col col-data-ss">Account Name:</div>
    </div>
    <div class="col-lg-3">row 1 col 2 data</div>
    <div class="col-lg-3">row 1 col 3 data</div>
    <div class="col-lg-3">row 1 col 4 data</div>
  </div>
  <div class="row">
    <div class="col-lg-3">
      <div class="first-col col-data-ss">Account Type:</div>
    </div>
    <div class="col-lg-3">row 2 col 2 data</div>
    <div class="col-lg-3">row 2 col 3 data</div>
    <div class="col-lg-3">row 2 col 4 data</div>
  </div>
</div>

任何人都知道如何使用jquery在同一行中使用相等的div高度

1 个答案: