как сделать внутренние делители горизонтально центрированными, когда их толкают друг на друга на маленьких экранах - PullRequest
Новая
       28

как сделать внутренние делители горизонтально центрированными, когда их толкают друг на друга на маленьких экранах

1 голос
/ 11 апреля 2019

У меня есть 4 делителя (каждый счетчик), все рядом друг с другом, когда экран широко.y Когда экран становится меньше, они накладываются друг на друга, но выровнены по правому краюбыть всегда в центре, когда 4 в строке, два в двух строках и 1 в 4 строках.

как мне этого добиться?числа могут измениться и сделать ширину переменной divs

Взгляните сюда: https://jsfiddle.net/Zivo/gp5wnL9f/1/

body {
    margin: 0;
    --border: 1px solid #cccccc;

}

.numbers {
    font-family: lato;
    font-size: 72px;
    color: #131128;
}

.odometer {
    display: inline-block;
    top: -7px;
}

.suffix {
    float: right
}

.frame {
    transform: translate(-50%);
    left: 50%;
    position: relative;
    border-bottom: var(--border);
    height: 94px;
    overflow: hidden
}

.suffix p {
    margin: 0 5px 0 0;
}

.odometer p {
    margin: 0 0 0 5px;
}

.theme {
    box-sizing: border-box;
    margin: 20px;
    float: left;
}

.hline {
    height: 40px;
    width: 50%;
    border-right: var(--border);
    /*    transform: translateY(-4px);*/
}

.num-title {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding-top: 6px;
}

HTML 

<body>
    <div class="numbers">
        <!--counter 1 - Sensors-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="10">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Sensors</div>
        </div>
        <!--counter 2 - ICO-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="13">
                    <p>0</p>
                </div>
<!--
                <div class="suffix">
                    <p>k+</p>
                </div>
-->
            </div>
            <div class="hline"></div>
            <div class="num-title">IOC Types</div>
        </div>
        <!--counter 3 - Scanners-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="550">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Scanners</div>
        </div>
        <!--counter 4 - Attackers-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="5">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Attackers</div>
        </div>
    </div>
    <script type="text/javascript">
        setTimeout(function() {
            let elements = document.getElementsByClassName('odometer');
            for (var i = 0; i < elements.length; i++) {
                let goal = elements[i].getAttribute("odometer-goal");
                elements[i].innerHTML = goal;
            }
        }, 1000);

    </script>
</body>

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

Удалите float: left из вашего класса .theme и добавьте следующие flex свойства в .numbers: 

display: flex;
flex-wrap: wrap;
justify-content: center;
  • Первое свойство активирует гибкий макет
  • flex-wrap: wrap позволяет обернуть строку элементов, если недостаточно места
  • justify-content: center сделает элементы центрированными вместо выравнивания по умолчанию (в зависимости от направления текста) 

body {
    margin: 0;
    --border: 1px solid #cccccc;

}

.numbers {
    font-family: lato;
    font-size: 72px;
    color: #131128;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.odometer {
    display: inline-block;
    top: -7px;
}

.suffix {
    float: right
}

.frame {
    transform: translate(-50%);
    left: 50%;
    position: relative;
    border-bottom: var(--border);
    height: 94px;
    overflow: hidden
}

.suffix p {
    margin: 0 5px 0 0;
}

.odometer p {
    margin: 0 0 0 5px;
}

.theme {
    box-sizing: border-box;
    margin: 20px;
}

.hline {
    height: 40px;
    width: 50%;
    border-right: var(--border);
    /*    transform: translateY(-4px);*/
}

.num-title {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding-top: 6px;
}
<body>
    <div class="numbers">
        <!--counter 1 - Sensors-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="10">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Sensors</div>
        </div>
        <!--counter 2 - ICO-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="13">
                    <p>0</p>
                </div>
<!--
                <div class="suffix">
                    <p>k+</p>
                </div>
-->
            </div>
            <div class="hline"></div>
            <div class="num-title">IOC Types</div>
        </div>
        <!--counter 3 - Scanners-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="550">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Scanners</div>
        </div>
        <!--counter 4 - Attackers-->
        <div class="sensors theme">
            <div class="frame">
                <div class="odometer" odometer-goal="5">
                    <p>0</p>
                </div>
                <div class="suffix">
                    <p>k+</p>
                </div>
            </div>
            <div class="hline"></div>
            <div class="num-title">Attackers</div>
        </div>
    </div>
    <script type="text/javascript">
        setTimeout(function() {
            let elements = document.getElementsByClassName('odometer');
            for (var i = 0; i < elements.length; i++) {
                let goal = elements[i].getAttribute("odometer-goal");
                elements[i].innerHTML = goal;
            }
        }, 1000);

    </script>
</body>
0 голосов
/ 11 апреля 2019

Чтобы получить то, что вы просили, добавьте text-align: center; к классу .numbers, а также удалите float: left; из класса .theme и добавьте display: inline-block; к .theme.

Вот последние классы: 

.numbers {
    font-family: lato;
    font-size: 72px;
    color: #131128;
    text-align: center; /* new */
}

.theme {
    box-sizing: border-box;
    margin: 20px;
    /* float: left; */ /* removed */
    display: inline-block; /* new */
}
...