如何完成自适应三栏等高

千叶
  • 452

我希望有这种效果:

http://ww2.sinaimg.cn/large/901d2bcejw1efiq7u7yh1j20wp0i7dpl.jpg

  1. 第一区固定宽度300px
  2. 第二区固定宽度50px
  3. 第三区填满浏览器剩余宽度
  4. 3个的高度已最高的区为准,如图所示第三区最高所以第二区和第一区 都拉长到与第三区相同的高度。

回复
阅读 3k
4 个回答

http://jsfiddle.net/fLL9V/

先给第三个子元素添加上 BFC 使其可以自适应宽度.
再使用 padding 把高度扩展到足够高, 然后用 margin 负值把它给拉回来,
最后在父元素添加 overflow:hidden 隐藏溢出.

如果都用width:x% 就可以。
比方说 .box1(width:20%) .box2(width:5%) .box3(width:75%)

fishenal
  • 3.4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏