проблемы css с использованием процента с внутренними элементами, составляющими равные проценты

У меня есть проблема, которую я не могу понять, и это просто не имеет смысла для меня.

У меня есть 1 контейнер div с шириной, установленной на 100%.


У меня есть 5 подразделений внутри всех с тем же именем класса и шириной 20%.

По какой причине он не будет соответствовать им на 20%, но будет соответствовать им на 19%? Я проверил, нет ли полей, границ или отступов, которые могли бы вмешиваться, но ничего не могу найти. Я не могу показать вам пример, потому что трудно воспроизвести проблему (как это работает в других местах).

Кто-нибудь испытывал это раньше и есть какие-то предложения?

4 ответа

  1. У меня то же самое иногда. Убедитесь, что на делениях, контейнере и корпусе нет полей или границ. Убедитесь, что ваше тело тоже на 100% широкое. Если проблема все еще есть, положите немного отрицательной маржи, как margin-left: - 2px;на ваших 5 подразделений

  2. Это работает хорошо, и это звучит так же, как вы делаете?

    У вас есть ссылка на страницу, над которой вы работаете?

    <style>
        .blah{
            width: 20%;
            margin: 0;
            height: 50px;
            padding: 0;
            float: left;
        }
    </style>
    
    <div style="width: 100%; ">
        <div class="blah" style="background-color: green;">
        </div>
        <div class="blah" style="background-color: green;">
        </div>
        <div class="blah" style="background-color: green;">
        </div>
        <div class="blah" style="background-color: green;">
        </div>
        <div class="blah" style="background-color: green;">
        </div>
    </div>
    
  3. Это может произойти, если количество доступных пикселей не может быть равномерно разделено на указанные размеры. Например, если ваша общая ширина 97 пикселей, то установка 5 divs для каждого будет 20% от этого будет 19,4 пикселей каждый, поэтому их размеры должны быть округлены каким-то образом. Как это округление обрабатывается зависит от браузера. Некоторые всегда будут округлять вниз, некоторые всегда будут округлять вверх (заставляя их не соответствовать), а некоторые будут округлять некоторые элементы вверх и некоторые элементы вниз (заставляя их больше не быть точно такого же размера, но они будут соответствовать и будут складываться до 100%)