如果css3是一个选项,则可以使用 csscalc()
函数来完成。
案例 1:在单行上对齐框(FIDDLE)
标记很简单——一堆带有一些容器元素的 div。
CSS 看起来像这样:
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
其中-1px可修复 IE9+ 计算/舍入错误 - 请参见此处
在这里,除了calc()
功能之外,media queries
都是必要的。
基本思想是为每个#columns 状态设置一个媒体查询,然后我使用 calc() 计算每个元素的边距(最后一列中的元素除外)。
这听起来像是很多工作,但如果你使用 LESS 或 SASS,这可以很容易地完成
(它仍然可以使用常规 css 完成,但是您必须手动进行所有计算,然后如果您更改框宽度 - 您必须重新计算所有内容)
下面是一个使用LESS的例子:(你可以在这里复制/粘贴这段代码来玩,[这也是我用来生成上述小提琴的代码])
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
所以基本上你首先需要确定一个盒子宽度和你想要的盒子之间的最小边距。
这样,您就可以计算出每个州需要多少空间。
然后,使用 calc() 计算右边距,使用 nth-child 从最后一列的框中删除右边距。
这个答案相对于使用的公认答案的优势text-align:justify
在于,当你有不止一排盒子时 - 最后一行的盒子不会“合理”,例如:如果最后一行还有 2 个盒子 - 我不希望第一个盒子在左边,下一个在右边——而是让盒子按顺序相互跟随。
关于浏览器支持:这将适用于 IE9+、Firefox、Chrome、Safari6.0+ - (有关详细信息,请参阅此处)但是我注意到在 IE9+ 上,媒体查询状态之间存在一些小故障。[如果有人知道如何解决这个问题,我真的很想知道 :) ] <--已修复