简体   繁体   中英

CSS3/HTML5 three column layout

Oh, so this is going to be little lame question.
I can't use any CSS framework and I can't use table layout too.
Solution is for Google Chrome only !

How can I set a three column layout like this:

[column1]      [column2]                      [column3]
[width: 250px] [flex width, content centered] [width: 250px]

so both (column1,3) will be static sized and the middle one will have content centered, and it's width will be flexible (window resize)

Afaik I can't use percentage width, I would need something like

#column2 {width: parent.width - 500px; left: 250px; text-align: center;}

but counting with parent is not possible, I know, this is artefact of my mobile programming skills...

If it's only for google chrome, then you can use the flexbox model.

http://dev.w3.org/csswg/css3-flexbox/

Example: http://www.jordanairwave.co.uk/2011/06/21/css3-flex-box-model/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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