MatchHeight
How do I make an matchheight?
What is a matchheight? How do you make a matchheight? This script and codes were developed by Mp_graphic on 06 August 2022, Saturday.
MatchHeight - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>matchHeight</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="list"> <h2>野菜</h2> <dl> <dt class="item">ピーマンピーマン</dt> <dd class="item">ピーマンの説明文。</dd> <dt class="item">にんじん</dt> <dd class="item">にんじんの説明文。</dd> <dt class="item">キャベツ</dt> <dd class="item">キャベツの説明文。</dd> <dt class="item">レタス</dt> <dd class="item">レタスの説明文。</dd> </dl>
</div>
<div class="list">
<h2>果物</h2> <dl> <dt class="item">りんご</dt> <dd class="item">リンゴの説明文。</dd> <dt class="item">みかん</dt> <dd class="item">みかんの説明文。</dd> <dt class="item">バナナ</dt> <dd class="item">バナナの説明文。</dd> <dt class="item">キュウイ</dt> <dd class="item">キュウイキュウイキュウイの説明文。</dd> <dt class="item">れもん</dt> <dd class="item">レモンの説明文。</dd> </dl>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/106959/jquery.matchHeight.js'></script> <script src="js/index.js"></script>
</body>
</html>
MatchHeight - Script Codes CSS Codes
dl,dt,dd{ margin: 0; padding: 0;
}
.list{ width: 200px; display: block; border: 1px solid #333333; margin: 5px; float: left;
}
.list h2{ color: #FFFFFF; background-color: #333333; padding: 4px; margin: 0px; font-size: 115%; text-align: center;
}
.list dt, .list dd{ padding: 5px 4px 5px 4px;
}
.list dt { width: 50px; clear: left; float: left; color: #333333; background-color: #CCCCCC; border-top: 1px solid #333333; border-right: 1px solid #333333;
}
.list dd { margin-left: 58px; border-top: 1px solid #333333; border-left: 1px solid #333333;
}
MatchHeight - Script Codes JS Codes
$(function() { $('.item').matchHeight();
});
Developer | Mp_graphic |
Username | mp_graphic |
Uploaded | August 06, 2022 |
Rating | 3 |
Size | 2,055 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by mp_graphic | 5,900 Kb |
Menu | 3,265 Kb |
Animation | 13,775 Kb |
Animated Scroll Up Button | 7,154 Kb |
Scroll fade | 4,263 Kb |
Animation | 4,478 Kb |
Vertical Timeline | 4,497 Kb |
Scroll menu | 6,677 Kb |
Tool tip | 3,718 Kb |
Vertical Scrollbars | 2,506 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Prism | Pyrografix | 2,843 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Incremental game | Eprouver | 5,868 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Table Exercise | Fresco | 9,585 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!