0

私はリアクティブ Web サイトを作成しています。つまり、ウィンドウのサイズが変更されます。左下と右隅に15pxのカーブがあり、幅100%のナビゲーションバーにたどり着くまでは順調でした。(ラッパーとして機能する) divNavCapの両側に呼び出す 2 つの 20px div を配置したいと考えています。Navこれは簡単で、ボタンの間隔をあけたり、端に画像を追加したりできます。呼び出された中央のセクションNavActionには 1 ピクセルの繰り返しの背景画像があり、汚れたサーバーで超高速に読み込まれます。

問題は、次の隠れた行にNavAction右を押さずに、できるだけ多くのスペースを占有する必要があることです。NavCapこれが私のコードです：

#nav {    
   width: 100%;
   height: 55px;
   position: relative;
   bottom: 0;
   overflow: hidden;
   background-color: #020202;
   -webkit-border-radius: 0px 0px 15px 15px;
   -moz-border-radius: 0px 0px 15px 15px;
   border-radius: 0px 0px 15px 15px;    
}

#nav * {    
   box-sizing: border-box;
   height: 100%;    
}

#navCap {    
   width: 20px;
   height: 55px;
   float: left;
   background-color: blue;    
}

#navAction {    
   width: 97.91%;
   height: 55px;
   float: left;
   padding: 0;
   background-color: green;    
}

        <div id="nav">                
            <div id="navCap"></div>                
            <div id="navAction">

            </div>                
            <div id="navCap" class="right"></div>

        </div>
4

2 に答える 2

1

の値が同じである2つのIDを持たないでくださいnavCap。

幅を指定する代わりに、代わりnavActionにaleftとright値を指定します。

#navAction {
    position         : absolute;
    left             : 20px;
    right            : 20px;
    top              : 0;
    height           : 55px;
    background-color : green;
}

次に、次のようにキャップを設定します。

#navCapLeft, #navCapRight {
    width            : 20px;
    height           : 55px;
    position         : absolute;
    top              : 0;
    background-color : blue;
}
#navCapLeft {
    left : 0;
}
#navCapRight {
    right : 0;
}
于 2013-02-06T07:29:29.293 に答える
0

別の簡単な解決策を次に示します。

<div id="nav">
    <div class="left"></div>
    <div class="right"></div>
</div>

#nav {
    width: 100%;
    height: 55px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 0px 0px 15px 15px;
    -moz-border-radius: 0px 0px 15px 15px;
    border-radius: 0px 0px 15px 15px;
    background-color: green;
}
#nav * {
    box-sizing: border-box;
    height: 100%;
}
.left,
.right {
    width: 20px;
    height: 55px;
    position: absolute;
    background-color: blue;
}
.left {
    left: 0;
}

.right {
    right:0;
}
于 2013-02-06T07:43:17.343 に答える