引导卡，所有尺寸均相同
奥斯汀·霍华德
我正在使用猫头鹰轮播和自举卡片制作一张由不同卡片组成的旋转表，以显示在我的网页中，我唯一的问题是所有卡片的高度都不相等。当我以后将更多的旋转木马放在更精简，看起来更专业的地方时，我希望它们具有这种统一感。下面，我提供了html，css和javascript的代码段以及即时消息的图像。我意识到这很可能在CSS中完成，但是我无法弄清楚如何使所有卡的高度相同。在下图中，请注意，出示的2张卡片“看起来”具有相同的高度，但不相同。取决于体内的实际情况是什么使身高明显升高。在该网页的早期版本中，我当时 能够做到这一点，但现在我不能
我还要附加原始代码所在的实时网页的副本。请不要对实际网页的设计发表评论。我正在尝试为自己准备一份现场简历。我仅附上该页面，因此您可以看到以前的代码。和我想要达到的外观。在网页中，您可以看到所有卡体都具有相同的高度，这正是我要复制的高度。任何帮助，不胜感激。
$(".owl-carousel").owlCarousel({
responsiveClass: true,
dots: true,
dotsContainer: false,
loop: true,
autoWidth: false,
autoplay:true,
nav:true,
smartSpeed:1000,
items:5,
responsive: {
0: {
items:1,
// margin: 150,
center: true
},
768: {
items:1,
// margin:200,
center: false
},
992: {
items:2,
// margin: 35,
center: true
},
1200: {
items:3,
// margin:250,
center: true
},
},
});/* *****************Project Cards ************************ */
.projectTitle{
color: #cdac81;
margin-top: 4rem;
text-align: center;
font-size: 3rem;
}
.card{
opacity: .90;
background-color: #00303f;
color: #cdac81;
border-style: inset;
border-color: #cdac81;
border-width: 5px;
border-radius: 1%;
}
.card-text{
text-align: left;
color: #cdac81;
}
.card-image{
align-self: center;
width: 90%;
}
.card-title, .card-body{
text-align: center;
}
.card-body{
}
.projectCarousel{
height: 62.5rem;
}
.projectCol{
width:auto;
height: auto;
}
.projectName{
font-family: serif;
font-size: 1.25rem;
}
#projectHeader{
font-family: serif;
text-align: center;
font-size: 100px;
}
.owl-carousel{
height: 62.5rem;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>projects</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<!-- Bootstrap Scripts -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Style Sheets -->
<link rel="stylesheet" href="css/styles.css">
<link href ="https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="Resume.html">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="Projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="skills.html" tabindex="-1" aria-disabled="true">skills</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid projectCarousel">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h1 class="projectTitle">Projects</h1>
</div>
</div>
<!-- <div class="row pRow"> -->
<!-- <div class="col-lg-4 col-md-6"> -->
<div class="owl-carousel">
<!-- <div class="row"> -->
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image"src="Images\TipCalculator.png" class="card-img-top" alt="TipCalculator">
<div class="card-body">
<h2 class="card-title">Tip Calculator</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>The calculator takes the amount of the bill, and the amount of people splitting the bill,
applies a 15% tip and displays to the user the amount each should be paying equally.</li>
<li>Uses the tkinter kit to display a simple GUI</li>
<ul>
<li>Python</li>
</ul>
</ul>
<a href="documents\Tip_calculator.py" class="btn btn-outline-light">Take a look at the code!</a>
</div>
</div>
</div>
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image" src="Images\TinDogPic.png" class="card-img-top" alt="TinDog">
<div class="card-body">
<h2 class="card-title">Tindog</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>This is a project that was part of a coding bootcamp as an introductory to Web Design</li>
<li>A spoof on the Website known as <a href="https://tinder.com/">tinder</a>... but for dogs. Enjoy</li>
<li>The website is meant as a one-page construction with no actual usage but to teach basic, to intermediate
bootstrap principles and techniques.</li>
<ul>
<li>Bootstrap, HTML, CSS</li>
</ul>
</ul>
<a href="Projects/TinDog/index.html" class="btn btn-primary">Go to the Site</a>
</div>
</div>
</div>
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image" src="Images\diceGameImage.png" class="card-img-top" alt="DiceGame">
<div class="card-body">
<h2 class="card-title">Dice Game Challenge</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>This is a project that was part of a coding bootcamp as an introductory to Web Design</li>
<li>the website generates a random number from 1-6 for two sets of dice</li>
<li>the webiste then uses javascript to change to the appropriate image and display a winner</li>
<ul>
<li>javascript, HTML, CSS</li>
</ul>
</ul>
<a href="Projects\DiceChallenge\dicee.html" class="btn btn-primary">Go to the Site</a>
</div>
</div>
</div>
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image" src="Images\DrumKit.png" class="card-img-top" alt="DrumKit">
<div class="card-body">
<h2 class="card-title">Drum Kit</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>This is a project that was part of a coding bootcamp as an introductory to Web Design</li>
<li>the website teaches foundations of event listeners, and adding audio to a webpage</li>
<li>it looks for keystrokes as well as a click to interpret what sound needs to be played</li>
<ul>
<li>javascript, HTML, CSS</li>
</ul>
</ul>
<a href="Projects\Drum Kit Starting Files\index.html" class="btn btn-primary">Go to the Site</a>
</div>
</div>
</div>
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image" src="Images\SimonSays.png" class="card-img-top" alt="DrumKit">
<div class="card-body">
<h2 class="card-title">Simon Says</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>This is a project that was part of a coding bootcamp as an introductory to Web Design</li>
<li>the website teaches foundations of using jQuery to perform the bulk of the background work
needed to play the game.</li>
<li>The game show's simons move's and allows the user to input in sequence the same moves.
if the user inputs an incorrect move a game over event will trigger.</li>
<ul>
<li>jQuery, HTML, CSS</li>
</ul>
</ul>
<a href="Projects\Simon\index.html" class="btn btn-primary">Demo!</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html> 特里摩斯
此代码会将所有卡片高度设置为找到的最大高度：
// set height of all cards to max height
// get array of all '.card' elements
const cards = Array.from(document.querySelectorAll('.card'));
// form array of card element heights (offsetHeight)
const cardHeights = cards.map(card => card.offsetHeight);
// find the maximum value of cardHeights array
const maxCardHeight = Math.max(...cardHeights);
// set all card `height` styles to `maxCardHeight`
cards.forEach(card => {
card.style.height = maxCardHeight + 'px';
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
以宽高比显示图像，并且所有图像尺寸的高度和宽度均相同
- 2
引导卡头-所有高度相同
- 3
所有列的结果均相同
- 4
OpenGL阴影贴图在所有对象上均相同
- 5
带有链接的引导卡的容量相同
- 6
使所有按钮具有相同的尺寸
- 7
SQL Server存储过程返回正确的行数，但所有行均相同
- 8
自定义ListView，其中所有图像的大小均相同
- 9
所有数组值均相同时发生拼接问题
- 10
所有Firebase依赖项的版本均相同，启动后应用仍然崩溃
- 11
SQL Server-插入表中-除1以外的所有列值均相同
- 12
创建的所有cookie均相等吗？
- 13
创建的所有cookie均相等吗？
- 14
在所有屏幕尺寸上的图像居中引导
- 15
删除列中所有项目均相同（不包括标题）并匹配指定字符串的列
- 16
选择*其中（....）中的id和所有columX均相等
- 17
查找R中所有列均相等的行
- 18
如何解决网页上的所有内容，使其在不同尺寸的屏幕上显示相同的尺寸？
- 19
使所有图像在引导程序中以相同的高度显示
- 20
在所有设备上使引导箱的高度相同
- 21
如何使所有按钮内联相同大小的引导程序？
- 22
如何在打孔卡中使用所有圆圈尺寸？
- 23
如何遍历所有引导程序选项卡并单击按钮即可打印内容
- 24
首次加载时显示的所有选项卡窗格（引导程序）
- 25
如何在所有不同的屏幕尺寸上使Image Gallery应用看起来相同？
- 26
带有引导程序3的所有列的固定列高相同
- 27
支持所有iPhone尺寸
- 28
如果数据框中的所有列均相等，则熊猫设置值
- 29
如何在SwiftUI的所有选项卡中使用相同的数据？（ObservableObject或EnvironmentObject）
我来说两句