Html 如何为持有班级卡的部门更换职位
晚上好, 我正在开发一个网上购物网站 我希望我的div向下一点，这一点与任何其他类别卡片div的位置相同 下面是一幅更好理解的图像： 你怎么能看到包含“yopro”的div，而且有点像第一个 以下是我的html代码：Html 如何为持有班级卡的部门更换职位,html,css,Html,Css,晚上好, 我正在开发一个网上购物网站 我希望我的div向下一点，这一点与任何其他类别卡片div的位置相同 下面是一幅更好理解的图像： 你怎么能看到包含“yopro”的div，而且有点像第一个 以下是我的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card cardcss" style="width: 18rem; height: 500px;">
<img src="img/perli.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix" >Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" style="width: 18rem; height: 530px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Brand</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine@outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine <i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
提前感谢您的帮助 给你的图像一个固定的高度和百分比宽度，并使用
对象匹配：覆盖对象位置：中心img.card-img-top {
object-fit: cover;
width: 90%;
height: 300px;
object-position: center;
}
\h1\u所有产品{
文本对齐：居中；
字号：2em；
文本转换：大写；
颜色：#2a2b75；
}
.大奖赛{
颜色：红色；
字体大小：150%；
显示：内联块；
右边距：65px；
}
.btn achat{
边缘底部：30px；
边缘顶部：15px；
}
#卡片2{
显示：内联块；
}
.cardcss{
显示：内联块；
}
img.card-img-top{
对象匹配：覆盖；
宽度：90%；
高度：300px；
对象位置：中心；
}
“Marjane”杂志上的产品销售
佩利
数量：90g
标记：Jaouda
制造业：塔鲁丹特
大奖赛：2.5 Dhs
尤普
数量：90g
标记：Jaouda
制造业：塔鲁丹特
大奖赛：2.5 Dhs
img.card-img-top {
object-fit: cover;
width: 90%;
height: 300px;
object-position: center;
}