Сегодня в журнале Smashing Magazine появился метод распределения элементов равномерно в контейнере с использованием CSS .
Недавно мне пришлось использовать 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' });
}
И здесь уменьшенный снимок экрана (см., как меню выравнивается с изображением заголовка):
снимок экрана http://i41.tinypic.com/2ntguf8.png
Любая идея, как я могу добиться этого без Javascript?
