Jquery 使用CSS对齐div以填充父容器的宽度

我有一个容器宽度为100%的页面，所以它是整个屏幕的宽度，我在一个网格结构中有几个div，它们都有float：左边没有设置宽度，只有10px的边距

---

是否有一种方法，使用CSS或jQuery，让div填充整个宽度，并调整自己以适应间隙，因此边距根据屏幕大小而变化。

如果以百分比（即宽度、边距、填充）指定所有尺寸，则可以使用CSS执行此操作

或者，如果需要特定的边距或填充，可以使用jQuery

$(window).resize(function() {
  var $columns = $('.column'),
      numberOfColumns = $columns.length,               
      marginAndPadding = 0,
      newColumnWidth = ($('#container').width() / numberOfColumns) - marginAndPadding,
      newColumnWidthString = newColumnWidth.toString() + "px";

  $columns.css('width', newColumnWidthString);
}).resize();

---

查看thirtydot在本帖中的答案，了解一个不含JavaScript的纯CSS/HTML解决方案，该解决方案适用于所有浏览器，包括IE6

HTML:

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <span class="stretch"></span>
</div>​

#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
}

---

​

使用CSS3现在非常简单

更新

添加了MS IE支持（信不信由你…）。我不太确定FF的东西，因为Mozilla改变了一些东西。我没有那么多时间。所以如果有人能纠正我

更新II

将代码移动到代码段

.container{
边框：1px纯黑；
显示：-网络工具包盒；
-webkit盒包：证明；
-webkit框对齐：居中；
显示器：-moz盒；
-moz盒包装：合理；
-moz框对齐：居中；
显示：-ms flexbox；
-ms-flex-pack:justify；
-ms-flex-align：居中；
显示：框；
包装盒：合理；
框对齐：居中；
}
.孩子{
背景色：红色；
}

一些内容
一些内容
一些内容

您说div当前没有设置宽度，但有设置的边距。你是想让div有一个固定的宽度，并且它们之间的空间是流动的吗？是的，这正是我想要考虑的：使用

space-between

（），它更稳定一点（相对于flexbox整体的稳定性），我发现了这个代码的一个奇怪的bug，它在你操作DOM时出现。尝试在初始渲染出现后添加附加框。其他盒子位置未正确对齐，在铬合金上测试