让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度

Question

我现在想让3个DIV并排，这个我知道用style:float,但是我还有一个要求就是，中间的一个DIV有固定宽度，比如1200px。高度无所谓，就100%，然后除去这个1200px所占的宽度，根据屏幕剩余的宽度，平均分配给剩下的2个DIV。效果相当于让中间的DIV居中，但是旁边的2个DIV要宽度一样。如何实现？

Answer 1

套table

<table width="100%">
  <tr>
    <td><div style="width:100%; background:#0cf; height:700px;"></div></td>
    <td style="width:1200px;"><div style="width:100%; background:#CCC; height:700px;"></div></td>
    <td><div style="width:100%; background:#0cf; height:700px;"></div></td>
  </tr>
</table>

追问

你的答案非常接近了，但有缺陷的地方是表格有那种边框，就是白色的那种线，这个对我来说很致命，如果能去掉就好了。这种应该只有DIV之间的拼接才没有这种白线

追答

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent
}
body {
 line-height:1
}
ol, ul {
 list-style:none
}
blockquote, q {
 quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
 content:'';
 content:none
}
:focus {
 outline:0
}
ins {
 text-decoration:none
}
del {
 text-decoration:line-through
}
table {
 border-collapse:collapse;
 border-spacing:0
}
.clear {
 clear: both;
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
}

把这个保存一个css。叫reset.css就可以，引用的时候放在最上面，你说的那个问题关键解决代码是

table {
 border-collapse:collapse;
 border-spacing:0
}

合并单元格，就不会有缝隙了，边线是默认没有的..

Answer 2

<div style="width:100%;height:200px;border:1px solid red;">
    <div style="float:left;border:1px solid red;width:20%;height:100%;"></div>
    <div style="width:60%;height:100%;margin:0 auto;float:left;border:1px solid red;"></div>
    <div style="float:left;border:1px solid red;width:20%;height:100%;"></div>
</div>
要想用html+CSS就只能使用百分比了！

追问

思路不错，但是我的要求是中间的DIV是固定长度，不是百分比呀

追答

html暂时不能实现，要用js的！获取最外层的宽度，减去中间固定长度，除以2就是两边的宽度了！

Answer 3

这个要用到js来实现，获取当前屏幕的宽度，然后减去中间div的宽度再除以二就能得到边上div的宽度，个人建议用jquery来获取元素会方便一点，边上两个div用同样的class定义。

Answer 4

用js来实现。

1；获取屏幕的宽度。

2；屏幕的宽度减去中间的宽度。

3；然后平均分配给左右两个DIV。

Answer 5

这个貌似要用JS来实现会好些