如何让Div中并列的几个子元素充分平均地填满所有空间？

Question

RT.
我还是贴一下我要应用的地方吧

<div class="btn-group btn-mul maxln">
  <button type="button" class="btn" style="width:20%;">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
  <button type="button" class="btn">Right</button>
</div>

Answer 1

没人回答，我自己倒是找到了一个不完美方法

div.row3 *{
    width:33.3%;
}
div.row4 *{
    width:25%;
}
div.row5 *{
    width:20%;
}

以此类推

以前尝试着写过一段js但是失败了不知道问题在哪 在外层元素加fito class在内层加fiti class

$.each($('.fito'),
    function(ord,ele){
        var fitolen = parseInt(ele.css('width'));
        var fitilen = fitolen / ele.children($('.fiti')).length;
        $.each(ele.children('.fiti'),
            function(ordi,elei){
                elei.css('width') = fitilen;
            })
    })

Answer 2

http://twitter.github.io/bootstrap/getting-started.html#examples

booestrap就是这么解决的，根据width的百分比

Answer 3

<div class="btn-group dib-wrap">
  <button type="button" class="btn dib">Left</button>
  <button type="button" class="btn dib">Middle</button>
  <button type="button" class="btn dib">Right</button>
  <button type="button" class="btn dib">Right</button>
</div>

.dib-wrap {
    font-size: 0;
    *word-spacing: -1px;
}
.dib-wrap .dib {
    font-size: 100%;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .dib-wrap { letter-spacing: -5px; }
}
.dib {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.btn-group,
.btn {
    margin: 0;
    padding: 0;
}
.btn-group {
    background-color: orange;
    height: 300px;
}
.btn {
    font-size: 14px !important;
    width: 25%;
    height: 100%;
}

DEMO: http://jsbin.com/oboyar/2