I am trying to make each div in same row with equal height but unable to do can any one help me to do this?
我试图让每个div在同一行中具有相同的高度，但无法做到任何人可以帮助我这样做吗？
what my code does it makes whole div with same height but i don't want like that i want like table structure where if in a row any div exceeds with max height then only only for that row all the div should be with same height other wise it should not
我的代码做了什么使得整个div具有相同的高度，但我不想像我想要的表结构，如果连续任何div超过最大高度然后只有该行所有div应该具有相同的高度其他明智的不应该
Thanks in advance
提前致谢
<!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 & 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"> </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"> </div>
<div class="col-data-ss"> </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"> </div>
</div>
<div class="col-lg-3">
<div class="col-data-ss"> </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"> </div>
<div class="col-data-ss">8/1/2013</div>
<div class="col-data-ss">$4519.00</div>
<div class="col-data-ss"> </div>
<div class="col-data-ss"> </div>
<div class="col-data-ss"> </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"> </div>
<div class="col-data-ss">8/1/2013</div>
<div class="col-data-ss">$3519.00</div>
<div class="col-data-ss"> </div>
<div class="col-data-ss"> </div>
<div class="col-data-ss"> </div>
<div class="col-data-ss"> </div>
<div class="col-data-ss"> </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>
1 个解决方案
#1
1
You might be able to do what you are wanting in the end by changing the structure of your HTML, such as:
最后，您可以通过更改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>
#1
1
You might be able to do what you are wanting in the end by changing the structure of your HTML, such as:
最后，您可以通过更改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>