3个部分的CSS布局,内容的侧面宽度和中间部分宽度消耗剩余

时间:2011-03-17 21:33:55

标签: html css

基本上我想要在左侧和右侧布置一些带有一些图标的工具栏,在中间放置一个可变大小的文本字段。我希望文本字段占用中间的剩余空间。侧面部分宽度未提前知道,它们由每侧可见按钮的数量决定。

问题类似于http://www.alistapart.com/d/holygrail/example_4.html,除了他的边列宽度无法硬编码。

是否可以纯粹在CSS中执行此操作?

2 个答案:

答案 0 :(得分:1)

听起来你需要display:table-cell

http://www.w3schools.com/css/pr_class_display.asp

容器可以是display:table-row,子项可以是display:table-cell。我相信这应该适合你。

答案 1 :(得分:0)

要回答我自己的问题,如果您使用的浏览器支持灵活的盒子布局模型,请将左右DIV设置为“-webkit-box-flex:0;”和中心DIV到“-webkit-box-flex:1;”完全符合我的要求。容器应该有“display:-webkit-box;”