简体   繁体   English

带CSS的3列拟合流体拟合布局

[英]3 column fit-fluid-fit layout with CSS

How do I create a fit/fluid/fit column layout with CSS? 如何使用CSS创建拟合/流体/拟合列布局? By fit I mean the column width is that of the content in it. 通过拟合,我的意思是列的宽度就是其中内容的宽度。 I do not want to set a pixel or percentage width for the outer columns, I want them to be the width of the content within them. 我不想为外部列设置像素或百分比宽度,我希望它们是其中内容的宽度。 I've resorted to using tables for the time being but it feels very wrong. 我暂时使用表,但是感觉很不对劲。 Any suggestions? 有什么建议么?

Found a CSS only solution. 找到了仅CSS的解决方案。 Just tried it, works great. 刚刚尝试过,效果很好。

http://www.thecssninja.com/xhtml/sangraal-layout http://www.thecssninja.com/xhtml/sangraal-layout

At first glance it seems like a 'fixed'-'fluid'-'fixed' layout, but you'll find if you remove the fixed widths on the right and left column that the columns 'fit' to the text you provide, and the center remains fluid without the center column or the container needing to know anything about the widths of the left and right columns. 乍一看,它看起来像是“固定”-“流体”-“固定”布局,但是您会发现,如果您删除了左右列“适合”您提供的文本的固定宽度,以及中心保持流动,而中心列或容器无需了解左右列的宽度。

Truly the Sangraal. 确实是桑格拉尔。

没有使用表格,但也许您可以在http://www.alistapart.com/d/holygrail/example_4.html上查找,它看起来与您所需要的非常相似。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM