Да, вы можете сделать это, если ширина элементов, подлежащих распределению, известна заранее. Но это немного грязно.
Хитрость заключается в том, что вам нужен интервал между каждым элементом '(Wp-sum (Wc)) / (Nc-1)', то есть ширина родительского элемента минус общая ширина всех дочерних элементов, разделенная на поровну между количеством промежутков между элементами.
Поскольку у CSS нет возможности делать выражения, мы должны немного его взломать. Сначала мы добавляем поле к родительскому элементу размером «сумма (Wc)», общая ширина всех дочерних элементов. Так что теперь родительский объект имеет ширину ‘(Wp-sum (Wc))’, и мы можем использовать значение заполнения в% относительно этой ширины.
Так, например, для четырех изображений размером 10px, 20px, 40px и 80px соответственно, наша сумма (Wc) составляет 150px. Установите это как родительское поле, тогда у дочерних элементов может быть треть этой ширины как отступ между ними.
<style type="text/css">
#nava { width: 10px; height: 20px;}
#navb { width: 20px; height: 20px;}
#navc { width: 40px; height: 20px;}
#navd { width: 80px; height: 20px;}
#nav { margin-right: 150px; white-space: nowrap; }
#nava, #navb, #navc { padding-right: 33.3%; }
</style>
<div id="nav"
><img id="nava" src="nava.png" alt="a"
><img id="navb" src="navb.png" alt="b"
><img id="navc" src="navc.png" alt="c"
><img id="navd" src="navd.png" alt="d"
></div>
Забавный отступ от тега - избежать пробелов между изображениями. «Nowrap» необходим, потому что если ширина родительского элемента меньше ширины страницы, иначе невозможно было бы разместить все элементы в строке. Наконец, в IE вам может понадобиться добавить div обёртки вокруг лота с шириной:: 100%; Переполнение: скрыто, чтобы предотвратить нежелательные полосы прокрутки, если вы занимаетесь всей страницей. И, конечно же, вам захочется быть в режиме стандартов.
Это также может работать с текстовыми элементами, если вы сделаете их встроенными блоками, чтобы вы могли добавить отступы, и вы явно указали их размер в ems. Это не будет работать, если размеры дочерних элементов заранее не известны (например, они содержат динамическое содержимое), так как вы не будете знать значение «sum (Wc)» для использования.
Честно говоря, я бы, наверное, просто использовал стол. Алгоритм компоновки таблицы очень легко справляется с вычислением, как распределить запасную ширину таблицы. (Используйте «table-layout: fixed» для получения наилучших результатов с ячейками известной ширины или «auto» для ответа на динамическое содержимое.) Таким образом, вам также не нужно беспокоиться об ошибках округления пикселей.