0

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

我有 3 个 div：

一个固定宽度为40px的左右div；（红色）Between 是一个中间 div，流体宽度为 100%；

当然 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 回答