英文:
Two rows using div containers
问题
I have different div containers in total number 9, they have unique styling for spacing and padding. I want to find a way now to have 2 rows, that each of these div cards will have enough spacing so that can be read easily. Currently, I have one div container and below them as a new row having different spacing. I will share my logic below both CSS and HTML code.
// CSS code
.cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
width: 100px;
height: 100px;
}
.card img {
max-width: 60px;
max-height: 60px;
}
.card h3 {
font-size: 16px;
margin-top: 10px;
}
.card-container > .card {
width: 120px;
height: 120px;
}
.card-body {
display: flex;
flex-direction: row;
align-items: center;
height: 50px;
padding: 10px;
}
.icon {
font-size: 24px;
margin-right: 5px;
}
h3 {
margin: 0;
font-size: 14px;
}
// Bootstrap HTML code
Shop by Categories
Health and Beauty
<!-- Clothing & Accessories icon -->
<a href="category-full.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/clothes_accessories.png.png">
<h3>Clothing & Accessories</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Toys & Hobbies icon -->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/toys_hobbies.png.png">
<h3>Toys & Hobbies</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Home & Appliances icon -->
<a href="category-full.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/home_improvement.png.png">
<h3>Home & Appliances</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Sport & Outdoor icon -->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/sport_outdoor.png.png" style="width: 56px;">
<h3>Sport & Outdoor</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Computer & Tablets icon -->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/computers_hardware.png.png" style="width: 56px;">
<h3>Computer & Tablets</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Video Games icon -->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/video_games.png.png" style="width: 56px;">
<h3>Video Games</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Kids & Family icon -->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/kids_family.png.png" style="width: 56px;">
<h3>Kids & Family</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Office equipment -->
<a href="category.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/office_equipment.png.png" style="width: 56px;">
<h3>Office equipment</h3>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
英文:
I have different div containers in total number 9, they have unique styling for spacing and padding. I want to find a way now to have 2 rows, that each of these div cards will have enough spacing so that can be read easily. Currently i have one div container and below of them as new row having different spacing. I will share my logic below both css and html code.
// css code
.cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
width: 100px;
height: 100px;
}
.card img {
max-width: 60px;
max-height: 60px;
}
.card h3 {
font-size: 16px;
margin-top: 10px;
}
.card-container > .card {
width: 120px;
height: 120px;
}
.card-body {
display: flex;
flex-direction: row;
align-items: center;
height: 50px;
padding: 10px;
}
.icon {
font-size: 24px;
margin-right: 5px;
}
h3 {
margin: 0;
font-size: 14px;
}
// bootstrap html code
<!-- Shop by Categories starts here -->
<div id="hot">
<div class="box py-4">
<div class="container">
<div class="row">
<div class="col-md-9">
<h2 class="mb-0">
Shop by Categories
</h2>
<!-- Health and Beauty icon -->
<a href="category-full.html">
<div class="cards-container d-flex justify-content-between">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/NewBeauty.png.png">
<h3>Health and Beauty</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<!--Clothing & Accessories icon-->
<a href="category-full.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/clothes_accessories.png.png">
<h3>Clothing & Accessories</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!--Toys & Hobbies icon-->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/toys_hobbies.png.png">
<h3>Toys & Hobbies</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!--Home & appliances icon-->
<a href="category-full.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/home_improvement.png.png">
<h3>Home & Appliances</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Sport & Outdoor icon-->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/sport_outdoor.png.png" style="width: 56px;">
<h3>Sport & Outdoor</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Computer & Tablet icon-->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/computers_hardware.png.png" style="width: 56px;">
<h3>Computer & Tablets</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Video Games icon-->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/video_games.png.png" style="width: 56px;">
<h3>Video Games</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- Kids and Family icon-->
<a href="category-right.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/kids_family.png.png" style="width: 56px;">
<h3>Kids & Family</h3>
</div>
</div>
</div>
</div>
</div>
</a>
<!--Office equipment -->
<a href="category.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/office_equipment.png.png" style="width: 56px;">
<h3>Office equipment</h3>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
答案1
得分: 1
<!-- 开始片段：js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Oxygen:wght@300;400;700&family=Poppins:wght@100;200;300;400;500;700;800&family=Roboto:ital,wght@0,100;0,300;0,500;0,700;0,900;1,400&family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 600px;
margin: 20px auto;
justify-content: center;
/* justify-content: space-between; */
border: 1px solid;
}
h1 {
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.card {
width: 250px;
height: 250px;
background-color: aqua;
margin: 20px;
border-radius: 6px;
position: relative;
cursor: pointer;
box-shadow: 0px 1px 10px 0px lightgray;
}
.card-img img {
height: 250px;
width: 100%;
border-radius: 5px;
}
.card-text {
position: absolute;
bottom: 0px;
background-color: white;
border-radius: 0 7px 0 5px;
font-weight: bold;
padding: 20px 30px 20px 5px;
}
.card-text a {
text-decoration: none;
color: black;
}
<!-- 语言: lang-html -->
<section>
<h1>按类别购物</h1>
</section>
<section>
<div class="container">
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">视频游戏 GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">视频游戏 GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">视频游戏 GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">视频游戏 GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">视频游戏 GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">视频游戏 GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
<details>
<summary>英文:</summary>
** Here your question answer in Html and CSS. It's not like your question answer, but I think it's help you. Without Bootstrap.**
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Oxygen:wght@300;400;700&family=Poppins:wght@100;200;300;400;500;700;800&family=Roboto:ital,wght@0,100;0,300;0,500;0,700;0,900;1,400&family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 600px;
margin: 20px auto;
justify-content: center;
/* justify-content: space-between; */
border: 1px solid;
}
h1 {
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.card {
width: 250px;
height: 250px;
background-color: aqua;
margin: 20px;
border-radius: 6px;
position: relative;
cursor: pointer;
box-shadow: 0px 1px 10px 0px lightgray;
}
.card-img img {
height: 250px;
width: 100%;
border-radius: 5px;
}
.card-text {
position: absolute;
bottom: 0px;
background-color: white;
border-radius: 0 7px 0 5px;
font-weight: bold;
padding: 20px 30px 20px 5px;
}
.card-text a {
text-decoration: none;
color: black;
}
<!-- language: lang-html -->
<section>
<h1>Shop by Categories</h1>
</section>
<section>
<div class="container">
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">Video Games GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">Video Games GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">Video Games GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">Video Games GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">Video Games GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">Video Games GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">Video Games GTA-5</a>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<img
src="https://cdn.pixabay.com/photo/2023/04/03/11/45/water-7896610_960_720.jpg"
alt=""
/>
<div class="card-text">
<a href="#">Video Games GTA-5</a>
</div>
</div>
</div>
<!-- <div class="card">
<div class="card-img"></div>
<div class="card-text"></div>
</div> -->
</div>
</section>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年4月17日 09:04:14
- 转载请务必保留本文链接：https://go.coder-hub.com/76031089.html
- bootstrap-4
- css
- html
评论