Есть ли способ уменьшить маржу при каждом динамически создаваемом дочернем элементе, чтобы дочерние элементы не переполняли родительский элемент? - PullRequest
Новая
       0

Есть ли способ уменьшить маржу при каждом динамически создаваемом дочернем элементе, чтобы дочерние элементы не переполняли родительский элемент?

1 голос
/ 03 апреля 2020

странное название, но объясняет, что мне нужно. Таким образом, у меня есть «рука» карт, и они динамически выталкиваются или выталкиваются. У меня есть отрицательное левое поле, которое делает карту похожей друг на друга, но оно становится действительно кластеризованным, когда слишком много карт. Один из вариантов - сделать ручные поля для каждой «руки» по количеству карт, но я не думаю, что это практично. Я целый день искал решение, но не мог его найти. Вот пример: 

<div> 
    <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
</div>

div{
    width:100%;
    display:inline-flex;
}
img{
    height: 200px;
}
.rest{
    margin-left: -70px;
}

https://codepen.io/justdx/pen/rNVbEMp

Мне в основном нужен динамически меньший размер поля, чтобы карты выглядели более стопками без изменения размера изображения. Большое спасибо!

Ответы [ 4 ]

1 голос
/ 03 апреля 2020

Не в традиционном смысле, нет, вы не можете сделать это только с чистым CSS, но ...

Вы можете использовать CSS Preprocessor. SASS . Комбинируя эти два ресурса ( 1 & 2 ), вы можете использовать SASS для выполнения этого требования, но было бы намного проще сделать это с использованием JavaScript / JQuery.

Пример: 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        div{
            width:100%;
            display:inline-flex;
        }
        img{
            height: 200px;
        }
        .rest{
            margin-left: -70px;
        }
    </style>
    <script>

        function getWidth() {
          return Math.max(
            document.body.scrollWidth,
            document.documentElement.scrollWidth,
            document.body.offsetWidth,
            document.documentElement.offsetWidth,
            document.documentElement.clientWidth
          );
        }
        function repositionCards(){
            $(document).ready(function() {
                var numCards = $("#cards > img").length;
                var viewportWidth = getWidth();
                var margin = 95000/viewportWidth;
                if(margin > 125){
                    margin = 125;
                }
                $(".rest").css("margin-left", "-"+margin+"px");
            });
        }
        $(document).ready(function() {
            var numCards = $("#cards > img").length;
            var viewportWidth = getWidth();
            var margin = 95000/viewportWidth;
            if(margin > 125){
                margin = 125;
            }
            $(".rest").css("margin-left", "-"+margin+"px");
        });
        window.onresize = repositionCards;
    </script>
</head>
<body>
<div id="cards"> 
    <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
</div>
</body>
</html>

В приведенном выше фрагменте показано поле scaling на основе numCards, чем больше карт, тем ближе они сгруппированы. Вы можете настроить / найти более подходящую формулу, которая соответствует вашим требованиям, но достаточно масштабируется для колоды карт.

0 голосов
/ 03 апреля 2020

Pure CSS решение: установите правое поле каждой карты на отрицательную ширину карты, чтобы карта эффективно не брала ширину из гибкой коробки. Затем используйте justify-content: space -ween, чтобы равномерно распределить карточки и позволить видимому переполнению поместить карточки одну поверх другой. 

img{
  width: 90px;
  margin-right: -90px;
}
div {
  display:flex;
  width:calc(100% - 90px);
  margin-bottom:10px;
  justify-content:space-between
}
<div> 
    <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
</div>
<div> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
</div>
<div> 
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
</div>
0 голосов
/ 03 апреля 2020

Вот краткий пример того, как это можно сделать в js

const container = document.querySelectorAll('.cards')[0];
const cards = document.querySelectorAll('.cards img');

const totalCards = cards.length;
const cardWidth = cards[0].offsetWidth;
const containerWidth = container.offsetWidth;
const margin = (containerWidth - cardWidth) / totalCards - 1;

console.log(margin, containerWidth)
cards.forEach((card, index) => {
    if (index === 0) {
      return
    }
    card.style.marginLeft = `${-(cardWidth - margin)}px`;
})
.cards {
  width: 100%;
  display: inline-flex;
}
.cards img {
  height: 200px;
}
<div class="cards"> 
    <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
      <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
      <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
      <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
      <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg">
  
</div>
0 голосов
/ 03 апреля 2020

Pure CSS не может использовать номер элемента для подсчета собственного поля или другого атрибута css. Возможно, вы можете использовать JS или что-то в этом роде: 

.rest {
    margin-left: -70px;
}
.rest:nth-child(n+8) {
  margin-left:-90px;
}
.rest:nth-child(n+12) {
  margin-left:-120px;
}

Или вы можете использовать Flexbox, чтобы заполнить всю ширину, если у вас есть такая цель.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...