Отображение контейнера для карт: Flex не работает из-за проблем с размером поля - PullRequest
Новая
       5

Отображение контейнера для карт: Flex не работает из-за проблем с размером поля

0 голосов
/ 05 мая 2020

Я столкнулся с этой проблемой, которую просто не могу исправить, и я считаю, что это из-за слишком большой маржи.

Проблема в том, что я хотел бы, чтобы на моем веб-сайте 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>

1 Ответ

0 голосов
/ 05 мая 2020

Я предполагаю, что вы пытаетесь склеить изображения на своей главной странице. Это вызвано полями в ваших тегах 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; вместо этого, оставшееся пространство, где элементы не могут go будет добавлен только слева и справа от содержимого. Таким образом, он центрируется, и между элементами не будет места (кроме случаев, когда вы устанавливаете поля или отступы). 

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