дочерние элементы go до новой строки, даже если они не превышают родительскую ширину - PullRequest
Новая
       4

дочерние элементы go до новой строки, даже если они не превышают родительскую ширину

0 голосов
/ 17 июня 2020

Я пытаюсь сделать так, чтобы мои 3 карты были в одной строке. Я вычисляю width каждого дочернего элемента с их margin, и в результате получается точный размер width элемента контейнера. Так почему же на линии не три карты? В чем проблема и как мне заставить ее работать с 3 элементами в одной строке с этими точными размерами контейнера и элементов? 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.cards-wrapper {
  background: orange;
}

.cards {
  background: blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card {
  height: 225px;
  width: 370px;
  border: 1px solid red;
  margin: 29px 30px;
}
<div class="container">

  <div class="cards">
    <div class="card">
      <img src="./img/icon1.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon2.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon3.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon4.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon5.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon6.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
  </div>
</div>

https://codepen.io/simonika/pen/ZEQBxZj

Ответы [ 3 ]

1 голос
/ 17 июня 2020

Две вещи:

1.) Добавьте box-sizing: border-box; ко всему (используя селектор *), чтобы включить границы по ширине.

2.) Боковые поля слева / right - добавлено для соседних элементов, поэтому установите 30 пикселей margin-right только для последнего / третьего элемента, как показано ниже: 

* {
  box-sizing: border-box;
}

.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.cards-wrapper {
  background: orange;
}

.cards {
  background: blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card {
  height: 225px;
  width: 370px;
  border: 1px solid red;
  margin: 29px 30px;
  margin-right: 0;
}
.card:nth-of-type(3n) {
   margin-right: 30px;
}
<div class="container">

  <div class="cards">
    <div class="card">
      <img src="./img/icon1.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon2.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon3.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon4.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon5.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon6.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
  </div>
</div>
0 голосов
/ 17 июня 2020

проблема заключается в марже в вашем классе .card, потому что маржа добавляется к пространству между div. Я изменяю поле на 0, вы можете использовать отступы, чтобы создать пространство между вашей рамкой и картой содержимого. 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.cards-wrapper {
  background: orange;
}

.cards {
  background: blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card {
  height: 225px;
  width: 370px;
  border: 1px solid red;
  margin: 0px 0px; //MARGIN 0
}
<div class="container">

  <div class="cards">
    <div class="card">
      <img src="./img/icon1.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon2.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon3.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon4.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon5.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon6.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
  </div>
</div>
0 голосов
/ 17 июня 2020

Ваша математика неверна. Вам нужно разложить левое / правое поле на множители шесть раз для каждой строки, что снизит ваши 30 пикселей до 20 пикселей, а затем учтет границу, которая станет 19 пикселей. 

1230 - 370(3) = 120 // total remaining space
120 / 6 = 20 // left and right margin size


.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.cards-wrapper {
  background: orange;
}

.cards {
  background: blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card {
  height: 225px;
  width: 370px;
  border: 1px solid red;
  margin: 29px 19px;
}
<div class="container">

  <div class="cards">
    <div class="card">
      <img src="./img/icon1.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon2.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon3.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon4.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon5.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon6.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
  </div>
</div>

Обратите внимание, что вы можете опустить граничную часть вычисления, если вы установите box-sizing на border-box

...