三列两行
问题描述 投票：0回答：2
我不太清楚如何解释写下我想要的东西，所以我留下了两张照片：第一张是我现在拥有的（全部连续）以及我想要的样子（在 Photoshop 中编辑）。
总之，我连续有 5 个，但我希望能够将它们放在第二张图片中；第一个占据 2 列，四列中的两行，然后其他 4 列每行分布 2 和 2 个。
我认为我没有解释清楚，抱歉，我希望通过编辑后的图像可以更好地理解。
<section class="section" id="trainers">
<div class="container"><br><br>
<div class="row">
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/brayWyatt.jpg" alt="">
</div>
<div class="down-content">
<span>RISE World Champion</span>
<h4>Bray Wyatt</h4>
</div>
</div>
</div>
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/juliaHart.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Women's Champion</span>
<h4>Julia Hart</h4>
</div>
</div>
</div>
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/jayBriscoe.jpg" alt="">
</div>
<div class="down-content">
<span>RISE International Champion</span>
<h4>Jay Briscoe</h4>
</div>
</div>
</div>
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/streetProfits.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Tag Team ChampionS</span>
<h4>The Street Profits</h4>
</div>
</div>
</div>
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/streetProfits.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Tag Team ChampionS</span>
<h4>The Street Profits</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ***** Roster ***** -->
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div class="section-heading-roster">
<h2 style="color: white;">EL <em>ROSTER</em></h2>
<img src="assets/images/line-dec.png" alt="">
</div>
</div>
</div>
<section class="section" id="trainers">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/adamPage.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Adam Page</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/annaJay.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Anna Jay</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/billieStarkz.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Billie Starkz</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/eddieKingston.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Eddie Kingston</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="trainers">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/giulia.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Giulia</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/jamieHayter.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Jaime Hayter</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/krisStatlander.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Kris Statlander</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/livMorgan.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Liv Morgan</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="trainers">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/luchasaurus.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Luchasaurus</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/orangeCassidy.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Orange Cassidy</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/rickyStarks.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Ricky Starks</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/samoaJoe.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Samoa Joe</h4>
</div>
</div>
</div>
</div>
</div>
</section>
#trainers {
padding-bottom: 30px;
}
#trainers .trainer-item {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
padding: 15px;
margin-bottom: 30px;
}
#trainers .trainer-item img {
width: 100%;
border-radius: 5px;
}
#trainers .trainer-item span {
font-size: 13px;
font-weight: 500;
color: #006B32;
display: inline-block;
margin-top: 25px;
margin-bottom: 10px;
}
#trainers .trainer-item h4 {
font-size: 19px;
font-weight: 600;
color: #232d39;
letter-spacing: 0.5px;
margin-bottom: 18px;
}
#trainers .trainer-item p {
margin-bottom: 20px;
}
#trainers .trainer-item-champion {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
padding: 15px;
}
#trainers .trainer-item-roster {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
#trainers .trainer-item-champion img {
width: 100%;
border-radius: 5px;
}
#trainers .trainer-item-champion span {
font-size: 13px;
font-weight: 500;
color: #006B32;
display: inline-block;
margin-top: 15px;
margin-bottom: 10px;
}
#trainers .trainer-item-champion h4 {
font-size: 19px;
font-weight: 600;
color: #232d39;
letter-spacing: 0.5px;
}
#trainers .trainer-item-roster img {
width: 100%;
border-radius: 5px;
}
#trainers .trainer-item-roster span {
font-size: 13px;
font-weight: 500;
color: #006B32;
display: inline-block;
margin-top: 15px;
margin-bottom: 10px;
}
#trainers .trainer-item-roster h4 {
font-size: 19px;
font-weight: 600;
color: #232d39;
letter-spacing: 0.5px;
}
2个回答
0
投票
投票
我已经通过在您想要分组的内容周围添加更多列和行
div's#trainers {
padding-bottom: 30px;
}
#trainers .trainer-item {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
padding: 15px;
margin-bottom: 30px;
}
#trainers img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
#trainers .trainer-item span {
font-size: 13px;
font-weight: 500;
color: #006B32;
display: inline-block;
margin-top: 25px;
margin-bottom: 10px;
}
#trainers .trainer-item h4 {
font-size: 19px;
font-weight: 600;
color: #232d39;
letter-spacing: 0.5px;
margin-bottom: 18px;
}<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<section class="section" id="trainers">
<div class="container"><br><br>
<div class="row">
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<span>RISE World Champion</span>
<h4>Bray Wyatt</h4>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Women's Champion</span>
<h4>Julia Hart</h4>
</div>
</div>
</div>
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<span>RISE International Champion</span>
<h4>Jay Briscoe</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Tag Team ChampionS</span>
<h4>The Street Profits</h4>
</div>
</div>
</div>
<div class="col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Tag Team ChampionS</span>
<h4>The Street Profits</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ***** Roster ***** -->
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div class="section-heading-roster">
<h2 style="color: white;">EL <em>ROSTER</em></h2>
<img src="assets/images/line-dec.png" alt="">
</div>
</div>
</div>
<section class="section" id="trainers">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Adam Page</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Anna Jay</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Billie Starkz</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Eddie Kingston</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="trainers">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Giulia</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Jaime Hayter</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Kris Statlander</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Liv Morgan</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="trainers">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Luchasaurus</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Orange Cassidy</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Ricky Starks</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="trainer-item-roster">
<div class="image-thumb-roster">
<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
</div>
<div class="down-content">
<h4 style="line-height: 3;">Samoa Joe</h4>
</div>
</div>
</div>
</div>
</div>
</section>
</body>如果您需要任何进一步的帮助，请告诉我。如果您能够进一步说明您的预期结果，我很乐意为您提供帮助。
0
投票
投票
您可以使用CSS网格布局。我只是对您的一个部分执行了此操作，但对您的其余部分执行了相同的操作。
.section{
display: grid;
grid-template-columns: 50% 50%;
}
.one-pic-col{
display: grid;
gap: 1vw;
align-items: center;
grid-template-columns: 1fr;
grid-template-rows: 100%;
margin-inline: 2vw;
}
.four-pic-col{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
gap: 1vw;
margin-inline: 2vw;
}
#trainers {
padding-bottom: 30px;
}
#trainers .trainer-item {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
padding: 15px;
margin-bottom: 30px;
}
#trainers .trainer-item img {
width: 100%;
border-radius: 5px;
}
#trainers .trainer-item span {
font-size: 13px;
font-weight: 500;
color: #006B32;
display: inline-block;
margin-top: 25px;
margin-bottom: 10px;
}
#trainers .trainer-item h4 {
font-size: 19px;
font-weight: 600;
color: #232d39;
letter-spacing: 0.5px;
margin-bottom: 18px;
}
#trainers .trainer-item p {
margin-bottom: 20px;
}
#trainers .trainer-item-champion {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
padding: 15px;
}
#trainers .trainer-item-roster {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
#trainers .trainer-item-champion img {
width: 100%;
border-radius: 5px;
}
#trainers .trainer-item-champion span {
font-size: 13px;
font-weight: 500;
color: #006B32;
display: inline-block;
margin-top: 15px;
margin-bottom: 10px;
}
#trainers .trainer-item-champion h4 {
font-size: 19px;
font-weight: 600;
color: #232d39;
letter-spacing: 0.5px;
}
#trainers .trainer-item-roster img {
width: 100%;
border-radius: 5px;
}
#trainers .trainer-item-roster span {
font-size: 13px;
font-weight: 500;
color: #006B32;
display: inline-block;
margin-top: 15px;
margin-bottom: 10px;
}
#trainers .trainer-item-roster h4 {
font-size: 19px;
font-weight: 600;
color: #232d39;
letter-spacing: 0.5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="section" id="trainers">
<div class="one-pic-col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
</div>
<div class="down-content">
<span>RISE World Champion</span>
<h4>Bray Wyatt</h4>
</div>
</div>
</div>
<div class="four-pic-col">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Women's Champion</span>
<h4>Julia Hart</h4>
</div>
</div>
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
</div>
<div class="down-content">
<span>RISE International Champion</span>
<h4>Jay Briscoe</h4>
</div>
</div>
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Tag Team ChampionS</span>
<h4>The Street Profits</h4>
</div>
</div>
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
</div>
<div class="down-content">
<span>RISE Tag Team ChampionS</span>
<h4>The Street Profits</h4>
</div>
</div>
</div>
</section>
</body>
</html>最新问题
- git 标签混淆 - 如何恢复？
- 使用短代码获取类别标题，无需项目符号列表
- Laravel 多段路由导致找不到资源
- 如何用Python制作异步进度旋转器？
- 使用Selenium进行页面导航但网页老是返回首页
- 使用react-icons时导入错误
- Roberta 用于句子相似度
- 如何自动从网站下载文件？
- 店员布局未显示
- 使用 Microsoft.Build API 构建项目
- 如何根据区域设置更改 rodauth 电子邮件模板？
- 带有标记聚类器的动态谷歌地图标记问题（可能滥用 useEffect/useRef）
- 如何将 application.css 中的 CSS 属性应用到 Rails 应用程序中的页面？
- DiscordJS 命令的 TypeScript 通用类
- 使用 Gradle 运行仪器测试，同时跳过构建和安装
- OVH LoadBalancer (Kubernetes) 背后的 APISIX 真实 IP
- 我可以从 nullptr 构造一个 string_view 吗？
- Spring MVC：如何在 JS 中访问模型对象 List<String>？
- linux内核中的宏BUILD_BUG_ON_INVALID(e)好像没什么用？
- 来自环境的 kubernetes liveness 端口
© www.soinside.com 2019 - 2024. All rights reserved.