css - 试图让 3 个 div 漂浮在屏幕的整个长度上，而中间 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 构成页面的整个宽度，大小取决于中间部分的增长时间。有问题让它工作......上面的解决方案是让两行都构成整个页面宽度，当然我希望这一切都在 1 行。

Answer 1

您可以使您的 div 显示为表格单元格。这是我执行它的方式：

#tab-seperator{
width:100%;
display:table;
}

#left {
width:auto;
display:table-cell;
}

.tab-wrapper {
width:1000px; /* Whatever you want the main container to be */
display:table-cell;
}

#right {
width:auto;
display:table-cell;
}

你可以在这里看到一个活生生的例子 只需检查元素

Answer 2

您可以通过.start为..end.content li

<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