css - 尝试让 3 个 div float 整个屏幕长度，而中间 div 是动态的

Question

CSS 标记:

body {
    margin: 0;
    background:#FFAA00;
}
#left {
    position: relative;
    background: url(footer_bg_social2.png) repeat-x 0 -70px;
    overflow:hidden;
    height: 70px;
}
#right {
    position: relative;
    background: url(footer_bg_social2.png) repeat-x 0 -70px;
    overflow:hidden;
    height: 70px;
}
#tab-seperator {
    height: 70px;
}
#tab-seperator div.tab-wrapper {
    position: relative;
    height: 70px;
    float:left;
}
#tab-seperator ul {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}
#tab-seperator ul li {
    float:left;
    display:block;
    height: 70px;
    line-height: 70px;
    vertical-align:middle;
}
#tab-seperator ul li.start {
    background: url(footer_bg_social2.png) no-repeat 0 0;
    width:22px
}
#tab-seperator ul li.content {
    background: url(footer_bg_social2.png) repeat-x 0 -140px;
}
#tab-seperator ul li.end {
    background: url(footer_bg_social2.png) no-repeat -248px 0;
    width:22px
}

HTML 标记:

<div id="tab-seperator">    
    <div id="left"> </div>       
    <div class="tab-wrapper">
        <ul>                
            <li class="start"></li>
            <li class="content">testing..length</li>
            <li class="end"></li>                                
        </ul>        
    </div>  
    <div id="right"> </div>    
</div>

因此，我希望让左右 div 组成我页面的整个宽度，大小根据中间部分增长的长度而变化。让它工作时遇到问题......上面的解决方案是让两行都构成整个页面宽度，当然我希望这一切都在一行上。

Answer 1

您可以通过为 .content 指定宽度来让 .start 和 .end 元素跨越整个宽度李。

<div id="tab-seperator">    
    <div id="left"> </div>       
    <div class="tab-wrapper">
        <ul id="oneline">                
            <li class="start">[start]</li>
            <li class="content">[testing..length]</li>
            <li class="end">[end]</li>                                
        </ul>        
    </div>  
    <div id="right"> </div>    
</div>

#oneline {display:table;width:100%;background:#555;}
.start, .content, .end {display:table-cell;}
.content {width:50%;background-color:#777;}

在此处查看实际操作:http://codepen.io/joe/pen/Ffzqm