使用 CSS 对齐 div 以填充父容器的宽度 [重复]答案

【问题标题】：Justify divs with CSS to fill width of parent container [duplicate]使用 CSS 对齐 div 以填充父容器的宽度 [重复]
【发布时间】：2011-10-26 11:27:05
【问题描述】：

我有一个容器宽度为 100% 的页面，因此它是屏幕的整个宽度，我有几个网格结构中的 DIV，它们都有浮动：留在它们上面并且没有设置宽度，只有 10 像素的边距。

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

【问题讨论】：

您说 div 目前没有设置宽度，但有设置边距。您是否打算让 div 具有固定的宽度，并让它们之间的空间流动？
是的，这正是我想要的

标签： jquery html css

【解决方案1】：

查看此线程中的 tyyddot 的答案，以获得适用于所有浏览器包括 IE 6 的不带 JavaScript 的纯 CSS/HTML 解决方案。

Fluid width with equally spaced DIVs

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

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>

CSS：

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

【讨论】：

我发现此代码存在一个奇怪的错误，当您操作 DOM 时会出现该错误。尝试在初始渲染出现后添加附加框。其他框位置未正确对齐，已在 Chrome 上测试

【解决方案2】：

现在使用 CSS3 超级简单。

更新

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

更新 II

将代码移至 sn-p

.container {
  border: 1px solid black;
  display: -webkit-box;
  -webkit-box-pack: justify;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-pack: justify;
  -moz-box-align: center;
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  display: box;
  box-pack: justify;
  box-align: center;
}
.child {
  background-color: red;
}

<div class="container">
  <div class="child">
    Some Content
  </div>
  <div class="child">
    Some Content
  </div>
  <div class="child">
    Some Content
  </div>
</div>

【讨论】：

考虑一下：使用更稳定的space-between (css-tricks.com/snippets/css/a-guide-to-flexbox)（相对于整个flexbox的稳定性）

【解决方案3】：

如果以百分比指定所有尺寸（即宽度、边距、内边距），您可以使用 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();

【讨论】：