4

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をページの全幅に合わせて、中央のセクションの長さに応じてサイズを変えたいと考えています。これを機能させるのに問題があります...上記の解決策は、両方ともページ幅全体を構成する2行を取得することです。もちろん、これをすべて1行にします。

4

2 に答える 2

0

の幅を指定することで、要素.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

于 2012-12-12T00:11:53.113 に答える
0

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;
}

ここでライブの例を見ることができます 要素を調べるだけです

于 2012-12-12T00:16:46.273 に答える