Метод равномерного распределения элементов в контейнере с использованием CSS появился сегодня в журнале Smashing Magazine .
Мне недавно пришлось использовать Javascript для достижения того же эффекта для элементов переменной ширины, но метод, представленный на SM, заставил меня задуматься, возможно ли это сделать без Javascript.
Есть этот вопрос , где gargantaun говорит:
ИМХО, и вы, вероятно, не хотите это слышать, но дизайн, вероятно, имеет недостатки. Общеизвестно, что равномерное распределение элементов по макету с помощью CSS является проблемой, поэтому дизайнеры должны избегать этого.
Но я не могу сказать дизайнеру изменить его дизайн, и я не согласен с тем, что недостатки CSS должны ограничивать дизайнеров.
В любом случае, вот что у меня есть в HTML (переведено и упрощено):
<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/news">News</a></li>
<li><a href="/theme">Theme</a></li>
<li><a href="/activities">Activities</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
в CSS (несущественные свойства удалены и упрощены):
#menu li { float: left; margin-right: 20px; }
#menu a { display: block; padding: 0 1em; }
и в Javascript:
function justifyMenu() {
var menuItems = $$("#menu li");
var menuWidth = $("menu").getWidth();
var totalWidth = 0;
menuItems.each(function(e) {
totalWidth += e.getWidth();
});
var margin = (menuWidth - 4 - totalWidth) / (menuItems.length - 1);
margin = parseInt(margin);
menuItems.each(function(e) {
e.setStyle({ marginRight: margin + 'px' });
});
menuItems[menuItems.length - 1].setStyle({ marginRight: '0' });
}
А вот уменьшенный снимок экрана (посмотрите, как меню выравнивается по изображению заголовка):
Есть идеи, как мне этого добиться без Javascript?