-
Notifications
You must be signed in to change notification settings - Fork 29
/
index-sync-siblings-only.html
43 lines (39 loc) · 1.9 KB
/
index-sync-siblings-only.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style>
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
p{
outline:1px solid red;
}
.parent{
outline:1px solid teal;
display: inline-block;
width: 49%;
vertical-align: top;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.syncheight.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(window).on('load resize', function(){
$('.parent').each( function() {
$(this).children('p').syncHeight({ 'updateOnResize': true});
});
});
</script>
</head>
<body>
<div class="parent">
<p>blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla blabla bla blabla bla</p>
<p>blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla </p>
</div>
<div class="parent">
<p>blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla blablabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla </p>
<p>blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla bla </p>
</div>
</body>
</html>