今天在Smashing杂志上出现了一种使用CSS在容器中均匀分配元素的方法.
我最近不得不使用Javascript来实现对可变宽度元素的相同效果,但SM上提供的方法让我想知道是否可以在没有Javascript的情况下执行此操作.
有这个问题,gargantaun说:
恕我直言,你可能不想听到这个,但设计可能有缺陷.众所周知,使用CSS在布局中均匀分布项目是一种痛苦,因此设计人员应该避免使用它.
但我无法告诉设计师改变他的设计,我不同意CSS的缺点应该限制设计师.
无论如何,这是我在HTML中的内容(翻译和简化):
在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的情况下实现这一目标吗？
当然这正是table元素的用途.同时看到人们用CSS将自己扭曲成一个gordian结,这是令人伤心和欢闹的,他们中的大多数甚至都不知道他们为什么要避开桌子.
无论你想要拒绝表格的原因是什么,它都可能比依赖Javascript布局你的页面更糟糕.
是的,我知道这不是你想要的答案,但很明显,它是如此明显.
一直有人声称表格是明显的解决方案,但是,没有真正讨论如何实现它.我将向您展示将div作为表格显示是正确的方法,但它并不像对齐所有单元格和设置自动宽度那么容易.这个问题是你无法控制最左边和右边细胞内容的外边距.它们都是从包含盒中插入一个你无法控制的任意数量.这是一个解决方法:
首先,稍微修改一下Guder的html:
现在的CSS:
#menu {display:table; width:// some width in px //}
#menu ul {display:table-row; width: 100%}
#menu li.left {display: table-cell; text-align: left; width: 20px; white-space:nowrap;}
#menu li {display: table-cell; text-align: right; width: auto;}
现在,我们可以完全控制菜单的最外侧,它与包含盒的左右两侧对齐,每个元素之间的距离是一致的.你会注意到我使用了一个技巧让最左边的单元格成为它内容的精确宽度.我将width属性设置为一个小的大小,明显低于其通常的内容.然后我将白色空间设置为无包裹,这将细胞拉伸到最小量以适合细胞的文本.你可以在这里看到一个显示其效果的图像(使用不同的html元素):
这段代码的优点在于它可以接受许多单元格和文本宽度,而不了解它们的实际宽度,并在页面上均匀分布它们.所有的时间,左右元素到达他们的周边,当然我们所有的html in divs,没有浏览器或互联网极客误导我们相信我们正在呈现表格数据.这里没有明确的妥协!
这就是显示:table-cell应该实现的 - 但是,IE只是不这样做,而FF <3也存在问题,我相信.
这些样式适用于FF3,Chrome,Safari和(我认为)Opera 9:
#menu ul {display:table;padding:0;}
#menu li {display:table-cell;text-align:center;}
但是你需要一些公平的技巧才能让它们在通常的商业浏览器中工作.
虽然Colin Brogan的答案为解决问题的"几乎在那里"解决方案提供了坚实的基础,但仍然取决于文本长度.如果文本太长,"单元格"将更宽,因此左侧有更多空间.我试图根据他的答案中提供的代码来解决这个问题,但我得出的结论是,问题并没有一个真正可能的解决方案,包括表或假表(display:table-cell).
所以我们必须等待CSS3灵活的盒子模型得到更广泛的支持(你可以在这里查看更新的支持).在此期间,您可以使用Flexie polyfill来修补不支持它的浏览器.如果你想现在检查它在WebKit上的样子(不需要polyfill),你可以试试下面的CSS:
#menu ul {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: justify;
width: 940px;
list-style: none;
padding: 0;
border: 1px solid gray;
}
#menu li {
border: 1px solid silver;
}
请注意,它只使用WebKit前缀.如果您决定将其带到生产网站,您应该为其他浏览器添加前缀.
这种方法确实接受未知数量的项目和文本宽度,而不知道它们的实际宽度,并将它们均匀地分布在它们的容器中(在这种情况下#menu ul).
如果您决定保守,那么Colin Brogan提出的方法是最可接受的,因为您将文本保持在相同的近似长度.如果没有,将开始展示更宽的空间.
京公网安备 11010802040832号 | 京ICP备19059560号-6 