拉伸水平div（中間div拉伸）

我的標題由三部分組成，兩邊寬度固定，中間伸展。

<div class="bigBlueBox"> 
    <div class="headerBox"> 
     <div class="leftSide"></div> 
     <div class="middleSide"></div> 
     <div class="rightSide"></div> 
    </div> 
</div>

我用display: box和box-flex: 1爲中間箱的拉伸。

body { 
    margin: 0; 
    padding: 0; 
} 
.bigBlueBox { 
    height: 45px; 
    width: 100%; 
    background-color: blue; 
} 
.headerBox { 
    border: 1px solid red; 
    color: #FFFFFF; 
    display: -moz-box; 
    font-weight: bold; 
    height: 45px; 
    margin: auto; 
    width: 100%; 
} 
.leftSide { 
    border: 1px solid yellow; 
    display: inline-block; 
    float: left; 
    height: 45px; 
    width: 20px; 
} 
.middleSide { 
    -moz-box-flex: 1; 
    display: inline-block; 
    float: left; 
    height: 45px; 
} 
.rightSide { 
    border: 1px solid green; 
    display: inline-block; 
    float: left; 
    height: 45px; 
    width: 20px; 
}

我的問題是，你可以在這個fiddle看到，有一個保證金我無法擺脫的（紅色邊框不是周圍的藍色框）。

enter image description here

我怎樣才能去掉這個「緣」？

否則，還有沒有使用盒子的方法嗎？

來源

2013-06-01 Majid Laissi

好解決方案很簡單，我只是不得不添加中間的div裏面的一些內容：

<div class="bigBlueBox"> 
    <div class="headerBox"> 
     <div class="leftSide"></div> 
     <div class="middleSide"> SOMETHING </div> 
     <div class="rightSide"></div> 
    </div> 
</div>

enter image description here

這也可以 

來源

2013-06-01 15:34:33

拉伸水平div（中間div拉伸）

回答

相關問題