卡片容器显示：由于边距大小问题，flex 无法正常工作

Question

我已经运行解决了这个问题，但我无法解决，我认为这是由于边距太大所致。

问题是我希望我的网站上有 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>

Answer 1

我假设您正在尝试将主页上的图像粘贴在一起。这是由 a 标签的边距以及 .cardContainer 的 justify-content: space-around; 引起的。

要使图像粘在一起，删除 a 中的边距并更改 .cardContainer 中的 justify-content: center。

你的代码加上我的修改在下面。

当您使用 justify-content: space-around; 时，剩余的 space 元素无法占据，将散布在项目周围。这显示在下面的图像（和片段）中。即使没有边距，项目之间也有 space。

.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;时，剩下的space元素不能去的地方只会被添加到内容的左边和右边。所以它会居中并且项目之间不会有 space（除非你设置了边距或填充）。

.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>

卡片容器显示：由于边距大小问题，flex 无法正常工作

Card container display: flex not working due to margin size issues

html

css

margin