html：3列，中心必须是固定宽度

Question

我需要在一行中有3列。中心的列是固定宽度，但左右列必须是流体。另外我需要用Android和IE8打开这个页面。所以它应该适用于旧浏览器。

我需要什么：

我的尝试，但不成功：

.left {
    float: left;
    width: 100%;
    margin-left: -50%;
    height: 230px;
    background: url('left.png') no-repeat right top;
}
.center {
    float: left;
    margin-left: -62px;
    background: #FDE95E;
    width:123px;
    height:123px;
    background: url('center.png');
}
.right {
    float: left;
    width: 50%;
    height:230px;
    background: url('right.png') no-repeat left top;
}

HTML：

<div class="left"><br></div>
<div class="center"><br></div>
<div class="right"><br></div>
<div style="clear: both;"></div>

Answer 1

CSS

.left {
    background: red;
    float: left;
    height: 500px;
    width: calc(50% - 50px);

}
.center {
    background: gray;
    height: 500px;
    width: 100px;
    margin: auto;
}
.right {
    background: red;
    float: right;
    height: 500px;
    width: calc(50% - 50px);
}

HTML

<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
<div style="clear: both;"></div>

http://jsfiddle.net/usb9sbje/

Answer 2

flexbox（caniuse）如果您不想使用float，请轻松解决此问题。

你需要的是一个包含display:flex;的包装，将#center设置为所需的宽度，然后你的边50％宽度减去#center的宽度。

＆＃13;

＆＃13;

html, body {
    height:100%;
    margin:0;
}

#wrapper {
    display:flex; /* Required. */
    height:100%;
}

#left, #right {
    background:blue;
    height:100%;
    width:calc(50% - 61px); /* 61 equals width of your #center divided by two. – Required. */
}

#center {
    width:122px;  /* Required. */
}

＆＃13;

<div id='wrapper'>
    <div id='left'>left</div>
    <div id='center'>center</div>
    <div id='right'>right</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

另一种方法，不使用calc（）

.container {
    position: relative;
}

.left, .right {
    width: 50%;
    box-sizing: border-box;
}

.left {
    float: left;
    padding-right: 50px;
}

.right {
    float: right; 
    padding-left: 50px;
}

.inner {
    background: red;
    height: 500px;
}

.center {
    background: gray;
    height: 500px;
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

HTML

<div class="container">
    <div class="left"><div class="inner">Left</div></div>
    <div class="right"><div class="inner">Right</div></div>
    <div class="center">Center</div>
    <div style="clear: both;"></div>
</div>

http://jsfiddle.net/usb9sbje/3/