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

问题描述 投票：0回答：1

我遇到了一个我无法解决的问题，我相信这是由于页边距太大的缘故。

问题是，我希望在我的网站上有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>
html css margin
1个回答
0
投票

我想你是想把主页面上的图片粘在一起。这是由您网站的页边距引起的。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>

space-around

当你使用 justify-content: center; 而不是，剩余的元素不能进入的空间将只被添加到内容的左边和右边，所以它将被居中，并且在项目之间没有空间（除了你设置的margin或padding）。因此，它将被居中，并且在项目之间不会有任何空间（除非你设置了margin或padding）。

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

center

你修改后的代码。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.