日期:2014-05-17  浏览次数:20726 次

问一个关于div布局的问题
HTML code

<div>
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
</div>



有如上结构的四个div, 

其中a,的宽度固定,b、c的宽度取决于其内容的撑开宽度,

预达到的效果:

若b、c实际宽度小于a的,则都固定为a的宽度;若b、c实际宽度有大于a的,则取他们中较大的宽度当三个div的宽度,

就是一直保证他们的宽度大小一致。


就是实现table的如下效果
HTML code

<table>
 <tr>
   <td id="a"></td>
 </tr>
 <tr>
   <td id="b"></td>
 </tr>
 <tr>
   <td id="c"></td>
 </tr>
</table>



不要用js脚本啊,请大家知道的给提个醒,不知道的帮忙顶一顶,谢谢~






------解决方案--------------------
楼上这不是废话吗?能说得具体点吗?
------解决方案--------------------
<div>
<div id="a" style="background-color:Azure;width:expression(Math.max(40,document.getElementById('b').offsetWidth,document.getElementById('c').offsetWidth))">1</div>
<div id="b" style="background-color:Bisque;width:0;width:expression(Math.max(document.getElementById('a').offsetWidth,document.getElementById('c').offsetWidth))">22222</div>
<div id="c" style="background-color:Red;width:0;width:expression(Math.max(document.getElementById('a').offsetWidth,document.getElementById('b').offsetWidth))">cc</div>
</div>
------解决方案--------------------
3列还是3行?
------解决方案--------------------
可是expression只有ie是支持的,其他浏览器不支持
------解决方案--------------------
不用脚本 不可能实现
楼上本质也是脚本 不管对不对 只能IE

------解决方案--------------------
有人说table 能做到的css就能做到,table 不能做到的css也能做到,难道这个效果只有table 做得到?
------解决方案--------------------
单纯的CSS无法解决。。。

简单的JS可以搞定,没必要在CSS上较劲
------解决方案--------------------
table 是个比较特殊的 block
非要较劲 那也没招