Question

我的笔：http://codepen.io/helloworld/pen/AHdLm

我有3个div：

左右div，固定宽度为40px; （红色）介于中间div之间，流体宽度为100％;

当然40px + 100％+ 40px总是会像现在一样包裹div。

我不能使用position：fixed for a solution我需要它用于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;
}

Answer 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

Answer 2

试试这个：

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

Example

但是上述内容不会使您的列保持相同的高度。如果你想这样做，你可以去display:table路线（但这与早期版本的ie不兼容）：

Display table

不能用2个具有固定宽度的div来包裹我的中间100％宽度div

2 个答案: