2

ページ幅に合わせて伸縮するヘッダーを作成したいと思います。

私のヘッダーは、幅が固定された 2 つの側面と伸びる中央の 3 つの部分で構成されています。

<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でわかるように、取り除くことができない余白があることです (赤い境界線が青いボックスの周りにありません)。

ここに画像の説明を入力

この「マージン」を削除するにはどうすればよいですか?

それ以外の場合、ボックスを使用せずにそれを行う別の方法はありますか?

4

1 に答える 1

1

ソリューションは非常にシンプルで、中央の div 内にいくつかのコンテンツを追加するだけで済みました。

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

ここに画像の説明を入力

どちらも可能性があります&nbsp;

于 2013-06-01T15:34:33.517 に答える