0

私のペン: http://codepen.io/helloworld/pen/AHdLm

私は3つのdivを持っています:

固定幅 40px の左右の div。（赤色）Between は 100% の流体幅を持つ中央の div です。

もちろん、40px + 100% + 40px は常に現在と同じように div をラップします。

position:fixed をソリューションに使用できず、IE8+ に必要です。

どうすればそれを達成できますか？

HTML

  <div id="wrapper">
    <div style="float:left;width:40px;height:80px;background:red;">Left</div>
            <div style="float:left;" class="table">
                <div id="navBar" >
                    <div class="cellContainer">
                        <div class="template">11</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">22</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">33</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">44</div>
                    </div>
                </div>
            </div>
     <div style="float:left;width:40px;height:80px;background:red;">Right</div> 
    <div style="clear:both" />
    </div>

CSS

.cellContainer {
    width: 20%;
    float: none;
    display: inline-block;   
}

.table {
    display: table;
    width: 100%;
    margin: 0 auto;
    background-color: orange;
}

.template{
    height: 80px;
    margin: 10px;
    background: lightgray;
    border: black solid 1px;
    padding-left: 5px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

#navBar {
    border: black solid 1px;
    text-align: center;
}
4

2 に答える 2

1

この css を .table に使用します

.table {
    position: absolute;
    left: 40px;
    right: 40px;
    margin: 0 auto;
    background-color: orange;
}

float: right;右のdivに使用します。

http://codepen.io/anon/pen/bspdn

于 2013-08-09T09:15:02.387 に答える
0

これを試して：

<div id="wrapper">
    <div style="float:left;width:40px;height:80px;background:red;margin-left:-40px;">Left</div>
            <div style="float:left; width:100%;background:blue;" class="table">
                <div id="navBar" >
                    <div class="cellContainer">
                        <div class="template">11</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">22</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">33</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">44</div>
                    </div>
                </div>
            </div>
     <div style="float:right;width:40px;height:80px;background:red; margin-right:-40px;">Right</div> 
    <div style="clear:both"></div>
    </div>

CSS:

#wrapper {padding:0 40px;}

例

ただし、上記は列を同じ高さに保ちません。これを行いたい場合は、display:tableルートに進むことができます (ただし、これは以前のバージョンの ie と互換性がありません)。

表示テーブル

于 2013-08-09T09:17:39.550 に答える