html - 卡片容器显示:由于边距大小问题,flex 无法正常工作
问题描述
我遇到了这个我无法解决的问题,我相信这是由于利润太大。
问题是我想在我的网站上并排放置 3 张图片,但它们不想彼此相邻,因为我相信边距很大。
如果我遗漏了什么,我对编码很抱歉。
body {
background-color: AliceBlue;
font-family: "Helvetica", sans-serif;
color: black;
}
.arms {
height: 300px;
border-radius: 10px;
left: 300px;
}
#imgarms {
left: 300px;
}
a {
display: block;
width: 400px;
height: 320px;
border: 2px solid #F0FFFF;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
z-index: 10;
}
a:hover {
border-color: black;
}
.title {
position: absolute;
left: -20px;
}
.title {
position: relative;
margin-left: auto;
margin-right: auto;
left: -30;
}
#title {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.abs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.shoulders {
height: 300px;
border-radius: 10px;
left: 300px;
}
.back {
height: 300px;
border-radius: 10px;
left: 300px;
}
.legs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.chest {
height: 300px;
border-radius: 10px;
left: 300px;
}
.cardContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
}
<body>
<div id="title" class="title">
<img id="title" class="title" src="https://trinket-user-assets.trinket.io/4e936b48ef16b9730de36cbbaec1c6c1e4988efc-5ea104f02cc0c3264f51231e.png" alt="title" />
</div>
<div class="cardContainer">
<a href="arms.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8c41ed921e47afbbd3c097a06f8d44186fabf24e-5e9faf172cc0c3264f47ec6b.png" class="arms">
</article>
</a>
<a href="abs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8a1dbd5f8fcbc27772e44b9edadb3eea4d5f8e3d-5e9faf172cc0c3264f47ec6a.png" class="abs">
</article>
</a>
<a href="shoulders.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/6ba09699551ac1bc979673bbf99fee75b4064d10-5e9faf182cc0c3264f47ec71.png" class="shoulders">
</article>
</a>
<a href="back.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/a6776f95e6b7868be91d5aa0e89710e64e62fff8-5e9faf182cc0c3264f47ec6d.png" class="back">
</article>
</a>
<a href="legs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/b628c0bca25058c3dac2cffcaff1ae4552522e7e-5e9faf182cc0c3264f47ec70.png" class="legs">
</article>
</a>
<a href="chest.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/373f3cbc6207fa4f67b4bcccb42f3b344c3fd10b-5e9faf182cc0c3264f47ec6f.png" class="chest">
</article>
</a>
</div>
</body>
解决方案
我假设您正在尝试将主页上的图像粘贴在一起。这是由a
标签上的边距justify-content: space-around;
以及.cardContainer
.
要使图像粘在一起,请删除 中的边距a
并更改justify-content: center
..cardContainer
您的代码和我的修改添加在下面。
当你使用justify-content: space-around;
元素无法占用的剩余空间时,将分散在项目周围。这显示在下面的图像(和片段)中。即使没有边距,这也有项目之间的空间。
.item{
background: lightgreen;
border: 2px solid darkgreen;
width: 100px;
height: 100px;
}
.wrapper{
justify-content: space-around;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 390px;
padding: 10px;
background: lightblue;
border: 2px dotted darkblue;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
改为使用时justify-content: center;
,元素不能去的剩余空间只会添加到内容的左侧和右侧。所以它会居中并且项目之间不会有空格(除非您设置了边距或填充)。
.item{
background: lightgreen;
border: 2px solid darkgreen;
width: 100px;
height: 100px;
}
.wrapper{
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 390px;
padding: 10px;
background: lightblue;
border: 2px dotted darkblue;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
您修改后的代码:
body {
background-color: orange;
}
body {
background-color: AliceBlue;
font-family: "Helvetica", sans-serif;
color: black;
}
nav ul {
background-color: tomato;
}
.arms {
height: 300px;
border-radius: 10px;
left: 300px;
}
#imgarms {
left: 300px;
}
a {
display: block;
width: 400px;
height: 320px;
border: 2px solid #F0FFFF;
border-radius: 10px;
box-sizing: border-box;
/* remove this padding to make the images really stick together */
padding: 10px;
z-index:10;
}
a:hover {
border-color: black;
}
.title {
position: absolute;
left:-20px;
}
.title {
position: relative;
margin-left: auto;
margin-right: auto;
left:-30;
}
#title {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.abs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.shoulders {
height: 300px;
border-radius: 10px;
left: 300px;
}
.back {
height: 300px;
border-radius: 10px;
left: 300px;
}
.legs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.chest {
height: 300px;
border-radius: 10px;
left: 300px;
}
.cardContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
/**********************************
This section is for styling tables
***********************************/
table, th, td {
border: 1px solid HoneyDew;
border-collapse: collapse;
}
tr {
background-color: PaleTurquoise;
}
th, td {
vertical-align: top;
padding: 5px;
text-align: left;
}
th {
color: purple;
}
td {
color: purple;
}
/********************************/
<!DOCTYPE html>
<html>
<head>
<title>Get Fit</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<meta charset="utf-8"/>
</head>
<body>
<header>
</header>
<main>
<div id="title" class="title">
<img id="title" class="title" src="https://trinket-user-assets.trinket.io/4e936b48ef16b9730de36cbbaec1c6c1e4988efc-5ea104f02cc0c3264f51231e.png" alt="title" />
</div>
<div class="cardContainer">
<a href="arms.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8c41ed921e47afbbd3c097a06f8d44186fabf24e-5e9faf172cc0c3264f47ec6b.png" class="arms">
</article>
</a>
<a href="abs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8a1dbd5f8fcbc27772e44b9edadb3eea4d5f8e3d-5e9faf172cc0c3264f47ec6a.png" class="abs">
</article>
</a>
<a href="shoulders.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/6ba09699551ac1bc979673bbf99fee75b4064d10-5e9faf182cc0c3264f47ec71.png" class="shoulders">
</article>
</a>
<a href="back.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/a6776f95e6b7868be91d5aa0e89710e64e62fff8-5e9faf182cc0c3264f47ec6d.png" class="back">
</article>
</a>
<a href="legs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/b628c0bca25058c3dac2cffcaff1ae4552522e7e-5e9faf182cc0c3264f47ec70.png" class="legs">
</article>
</a>
<a href="chest.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/373f3cbc6207fa4f67b4bcccb42f3b344c3fd10b-5e9faf182cc0c3264f47ec6f.png" class="chest">
</article>
</a>
</div>
</main>
<footer>
</footer>
</body>
</html>
推荐阅读
- r - 汇总条件和加起来为 0
- jquery - 在 .js 文件中 document.ready() 没有先触发
- web-scraping - 使用 IMPORTXML 将 Yahoo Finance 中的行业信息抓取到 Google 表格中
- python - 如何从另一个函数访问返回的函数值
- android - Android Kotlin - Recyclerview 检测滑动到 onBindViewHolder 内的下一个/上一个项目
- javascript - 从 firebase 实时数据库中获取 JSON 数据
- git - SVN - 在重新创建存储库结构时合并历史记录
- python - anaconda提示中的Matplotlib目录错误?
- php - mkdir():权限被拒绝 权限已设置
- reactjs - 使用 Firebase 在 React Native Expo 应用程序中验证登录页面,但必须单击按钮两次才能执行完整功能