具有等间距DIV的流体宽度
我有一个流体宽度容器DIV。
在这个我有4个DIVs全部300px x 250px ...
<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
我想要发生的是盒子1左浮，盒子4右浮，盒子2和盒子3均匀间隔。 我希望间距也是流动的，所以浏览器变得更小，空间也变小。
请参阅： http : //jsfiddle.net/thirtydot/EDp8R/
text-align: justify与.stretch结合是处理定位的方法。 display:inline-block; *display:inline; zoom:1 display:inline-block; *display:inline; zoom:1修复IE6 / 7的inline-block ，请参阅此处。 font-size: 0; line-height: 0 font-size: 0; line-height: 0修复了IE6中的一个小问题。 #container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1,
.box2,
.box3,
.box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1,
.box3 {
background: #ccc
}
.box2,
.box4 {
background: #0ff
}<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>现在最简单的方法就是使用Flexbox：
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS然后简单地：
#container {
display: flex;
justify-content: space-between;
}
演示：http://jsfiddle.net/QPrk3/
但是 ，目前仅支持相对较新的浏览器（http://caniuse.com/flexbox）。 此外，Flexbox布局规格已经改变了几次，因此可以通过额外包含更老的语法来覆盖更多浏览器：
http://css-tricks.com/old-flexbox-and-new-flexbox/
http://css-tricks.com/using-flexbox/
如果css3是一个选项，可以使用css calc()函数完成。
案例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 +计算/舍入错误 - 请参阅此处
情况2：在多行上对齐框（FIDDLE）
在这里，除了calc()函数外， media queries也是必要的。
其基本思想是为每个#columns状态设置一个媒体查询，然后我使用calc（）来计算每个元素（除了最后一列中的元素）的margin-right。
这听起来像很多工作，但如果你使用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（）来计算右边距，而第n个孩子从最后一列的方框中移除右边距。
与使用text-align:justify的可接受答案相比 ，这个答案的优点是当你有多行框 - 最后一行的框不会得到“对齐”，例如：如果有2个框保留在最后一行 - 我不希望第一个盒子在左边，而下一个在右边 - 而是盒子依次相互排列。
关于浏览器支持 ：这将适用于IE9 +，Firefox，Chrome，Safari6.0 + - （详情请参阅这里 ）然而我注意到在IE9 +上媒体查询状态之间有点小故障。 [如果有人知道如何解决这个问题，我真的很想知道:)] < - 固定在这里
链接地址: http://www.djcxy.com/p/88273.html