我有一个流体宽度容器DIV。

在这里我有4个div,都是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之间间隔均匀。我希望间距是流动的,所以当浏览器变小时,空间也会变小。


当前回答

如果你知道每个“行”的元素数量和容器的宽度,你可以使用选择器为你需要的元素添加边缘,以形成合理的外观。

我有三排div,我想要对齐,所以使用:

.tile:n -child(3n+2) {margin: 0 10px}

这允许每行的中心div有一个边距,将第1和第3个div强制移到容器的外边缘

也适用于其他东西,如边界、背景色等

其他回答

在jQuery中,你可以直接以父对象为目标。

如果你不知道具体会有多少孩子,这是很有用的 动态添加或者如果你不能算出它们的数目。

var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

这将使父节点在添加子节点时水平增长。

注意:这里假设'。孩子们有一个宽度和高度设置

希望能有所帮助。

现在最简单的方法是使用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+ calc/舍入错误-看到这里

案例2:在多行上对齐盒子(FIDDLE)

在这里,除了calc()函数外,还需要媒体查询。

基本思想是为每个#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()计算右边距,并使用n -child从最后一列的方框中删除右边距。

这个答案相对于使用text-align:justify的被接受的答案的优点是,当你有不止一行的盒子时——最后一行的盒子不会被“对齐”,例如:如果最后一行还有两个盒子——我不希望第一个盒子在左边,下一个盒子在右边——而是盒子按照顺序排列。

关于浏览器支持:这将工作在IE9+,Firefox,Chrome,Safari6.0+ -(参见这里了解更多详细信息)但我注意到,在IE9+媒体查询状态之间有一个小故障。[如果有人知道如何解决这个问题,我真的很想知道:)]<-固定在这里

如果你知道每个“行”的元素数量和容器的宽度,你可以使用选择器为你需要的元素添加边缘,以形成合理的外观。

我有三排div,我想要对齐,所以使用:

.tile:n -child(3n+2) {margin: 0 10px}

这允许每行的中心div有一个边距,将第1和第3个div强制移到容器的外边缘

也适用于其他东西,如边界、背景色等

参见:http://jsfiddle.net/thirtydot/EDp8R/

这适用于IE6+和所有现代浏览器! 我把你要求的尺寸减半了,这样更容易处理。 Text-align: justify与.stretch的组合是处理定位的方法。 显示:inline-block;*显示:内联;zoom:1修复了IE6/7的内联块,见这里。 字体大小: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>

额外的span (.stretch)可以替换为:after。

这与上面的解决方案一样,在所有相同的浏览器中仍然有效。after在IE6/7中不起作用,但他们无论如何都在使用distribute-all-lines,所以没关系。

参见:http://jsfiddle.net/thirtydot/EDp8R/3/

有一个小缺点:after:为了使最后一行在Safari中完美工作,你必须小心处理HTML中的空白。

具体来说,这是行不通的:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

这就是:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

您可以将此用于任意数量的子div,而无需通过更改为每个子div添加boxN类

.box1, .box2, .box3, .box4 { ...

to

#container > div { ...

这将选择#container div的第一个子div,而不是它下面的其他div。为了泛化背景颜色,你可以使用CSS3 n阶选择器,尽管它只在IE9+和其他现代浏览器中支持:

.box1, .box3 { ...

就变成:

#container > div:nth-child(odd) { ...

请参阅这里的jsfiddle示例。