-webkit-box

by redky

HTML

<div class="box">
    <div class="item side">Hello world</div>
    <div class="es"></div>
    <div class="item sub">HeHe</div>
</div>

CSS

.box {
    display: -webkit-box;
}

/* 
    当 :first-child 有内容时, 可以明确看到, 
    box-flex 平分的内容是 box 中空闲空间 
*/
.item {
    -webkit-box-flex: 1;
    height: 30px;
    line-height: 30px;
    background-color: #faa;
}

.side { text-align: right; }
.sub { text-align: left; }

.item:after {
    content: 'X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X';
    font-size: 2em;
    display: inline-block;
    /* display: block; */
    height: 0;
    line-height: 0;
    overflow: hidden;
}

.es {
    width: 120px;
    height: 30px;
    background-color: blue;
}