html - 只有中间的div是固定宽度的，三个div怎么扩展父元素？

Question

有没有办法让三个 div 元素扩展父元素的宽度，而只有中间 div 具有固定宽度？中间元素左侧和右侧的 div 元素应具有相等的宽度。

我想要这样的工作：

<div style="width:100%">
    <div id="elasticWidth1"></div>
    <div id="fixedWidth"></div>
    <div id="elasticWidth2"></div>
</div>

编辑：结果应该是这样的：

Answer 1

你可以使用这样的东西：http: //jsfiddle.net/Urbrf/6/

html

<div id="wrapper">
    <div class="halfWidth left">
        <div class="padding">
            <div id="columnOne" class="fullWidth">
            </div>
            <div id="columnTwo" class="fixedWidth">
            </div>
        </div>
    </div>
    <div class="halfWidth right">
        <div class="padding">
            <div id="columnThree" class="fullWidth">
            </div>
        </div>
    </div>
</div>

CSS

#wrapper {width:100%;}
.halfWidth {width:50%;}
.fullWidth {width:100%;}
.left,
.left .fullWidth {float:left;}
.left .padding {padding-right:100px;} /*half of the fixed width*/
.right,
.right .fullWidth {float:right;}
.right .padding {padding-left:100px;} /*half of the fixed width*/

.fixedWidth {width:200px; margin-right:-200px; float:right;}

Answer 2

我不会使用浮动，而是使用内联块：

div {
    display: inline-block;
}

无论如何，当它们是弹性的时，你想如何设置左右 div 的宽度相等？