任何人都知道如何使用jquery在同一行中使div高度相等
[英]any one knows how to make equal div height in same row using jquery
问题描述
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 已采纳 2015-08-31 17:33:17
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用jquery使子div在一行上相等 - Make child div equal on a row using jquery
使用简单的jQuery脚本获取一个div高度并使另一个div大小相同的问题 - Issues using a simple jQuery script to grab one div height & make another div the same size
如何使一个div与一个div具有相同的高度 - How to make a div to have same height to one div
如何使用JavaScript使每个div的高度等于高度？ - How to make the height of a each div equal height with JavaScript?
如何使div的“下距”等于另一个div的高度？ - How to make div “margin-bottom” equal to another div height?
如何使每个div具有相同的高度，以保持每行3 div对齐工作 - How to make each div the same height, in order to keep the 3 div per row alignment working
使用jQuery在行上的多个div高度列 - Multiple div height columns on row using JQuery
使一个 div min-height 等于另一个 div-height 加上 px - Make one div min-height equal another div-height plus px
使用js将一个div的高度设置为与另一个div相同的高度 - Using js to set height of one div to the same height as another div
使用指令使所有div高度相同 - Make all div same height using directive
相关标签