首页 文章

使用CSS证明div以填充父容器的宽度[重复]

提问于
浏览 次
20

这个问题在这里已有答案：

我有一个容器宽度为100％的页面，所以它的整个屏幕宽度，我有几个网格结构的DIV，它们都有浮动：左边没有设置宽度，只有10px的边距 .

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

jquery html css

3 回答

  • 28

    在这个帖子中查看thirtydot的答案，获得一个没有JavaScript的纯CSS / HTML解决方案，适用于所有浏览器 including IE 6 .

    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
}
    回复于
  • 9

    使用CSS3现在非常简单 .

    UPDATE

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

    UPDATE II

    已将代码移至代码段

    .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>
    回复于
  • 2

    如果以百分比形式指定所有维度（即宽度，边距，填充），则可以使用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();
    回复于

相关问题