Блог

Главная - Вопросы по программированию - первый и последний chilld

первый и последний chilld

#html #css

#HTML #css

Вопрос:

У меня есть div, в котором есть 5 разделов. Вот его фотографии:

product-div (1280 пикселей)

product-pc (5 div, внутри product-div. размер 1 div составляет 252 пикселя)

Я хочу центрировать эти 5 div в родительском. Мои расчеты следующие:

 product-div  1280px
product-pc  252px
252*5 = 1260px

now i have 20px

20/4 = 5px
5/2 = 2.5

В результате хочу использовать margin-left 2.5px и margin right 2.5px ,
за исключением первого дочернего элемента, где я хочу margin-left : 0px , и для последнего дочернего элемента margin-right : 0px
Я не могу заставить это работать, что я делаю не так? 

 .product-div {
    display: flex;
    width: 1280px;
    margin-left: 10%;
    margin-right: 10%;
}

product-div:first-child {
    margin-left: 0px;
}

product-div:last-child {
    padding-right: 0px;
}

.product-pc {
    border: 1px solid;
    border-color: grey;
    margin-left: 2.5px;
    margin-right: 2.5px;
}  
 <div class="product-div">
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
</div>

Комментарии:

1. попробуйте: .product-div:first-child, .product-div:last-child {margin:0} и не забудьте точку перед именем класса 🙂

2. Спасибо. я тоже пробую это, но не работает.

3. Пожалуйста, добавьте также HTML-код.

4. Я добавил html-код

5. я предполагаю, что вы выбрали неправильный элемент, попробуйте вместо .product-pc:first-child, .product-pc:last-child {margin:0} этого wile .product-div является единственным родителем

Ответ №1:

Вам не хватает точки в вашем css . 

   .product-div .product-pc:first-child {
       margin-left: 0px;
  }
  .product-div .product-pc:last-child {
       margin-right: 0px;
  }

Ответ №2:

Согласно вашему вопросу, я думаю, что ваш дочерний класс — это product-pc, поэтому вам нужно добавить этот класс вместо product-div. Другое дело, что вы использовали margin для первого дочернего элемента и padding для последнего. Я добавил поле для обоих, чтобы вы могли использовать что угодно в соответствии с вашими требованиями.

 .product-pc:first-child{
    margin-left: 0px;
}
.product-pc:last-child{
    margin-right: 0px;
}

Ответ №3:

Вы выбираете родительский div, у которого нет дочернего элемента. Пожалуйста, выберите первый div родительского элемента, а затем используйте первый и последний дочерний элемент.

Как и в списке, мы делаем это

 ul li:first-child {}

Итак, попробуйте это

 .product-div .product-pc:first-child {margin-left: 0px;}
.product-div .product-pc:last-child {margin-right: 0px;}

Ответ №4:

Я бы пошел немного по-другому, чтобы достичь этого пространства. Вместо выбора первого и последнего дочернего элемента я бы выбрал a .product-pc , за которым следует a .product-pc , и присвоил ему двойное значение левого поля (в данном случае 5 пикселей вместо 2,5 пикселей). Это означает, что все .product-компьютеры, кроме первого, получают левое поле.

Я добавил серый фон, чтобы лучше продемонстрировать решение.

Меньше кода.

Никаких странных полупикселей.

 .product-div{
    display: flex;
    width: 1280px;
    margin-left: 10%;
    margin-right: 10%;
    background-color: #ccc;
}

.product-pc   .product-pc {
    margin-left: 5px;
}

.product-pc{
    border: 1px solid;
    border-color: grey;
    margin-left: 2.5px;
    margin-right: 2.5px;
}  
 <div class="product-div">
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
  <div class="product-pc">
      <img src="img/product.jpg" alt="">
      <p class="product-name">Pixel 2 XL</p>
      <div>
          <a class="product-price" href="#">500₾</a>
      </div>
  </div>
</div>

Ответ №5:

Если я вас правильно понимаю, вы хотите, чтобы ваши first и last product-pc оставались в стороне.

Это можно сделать, добавив a justify-content: space-between в ваш product-pc контейнер.

Вот так,

 .product-div {
  display: flex;
  justify-content: space-between;
  width: 1280px;
}

Кстати, не рекомендуется устанавливать фиксированную ширину для элементов. На вашем месте я бы изменил это width: 1280px; на использование % или vw . вот так: width: 90vw .

Ответ №6:

Пожалуйста, используйте правильный селектор.

 .product-pc:first-child {
    margin-left:0px;
}
.product-pc:last-child { 
    margin-left:0px;
}

Что не так в вашем коде:

 product-div:first-child