布局在CSS表格中像HTML表格中的表格单元格 [英] Layout divs in css like table cells in HTML Tables
问题描述
今天又一次，我偶然发现了一个问题，我总是有css布局。我想在水平线上有5个div。比方说，它们的宽度应该是：
One more time today i stumbled upon a problem i always have with css layouts. I'd like to have 5 divs in a horizonzontal row. Let's say for example their widths should be:
- 1：60 px，
- 2：30 ％，
- 3：40px，
- 4：*
- 5：100px
- 1 : 60 px,
- 2 : 30 %,
- 3 : 40px,
- 4 : *
- 5 : 100px
其中*表示填满剩余空间。回到过去，我们已经是我们布局宽度表的方式。现在由于accesibility原因html表被禁止布局。这只是一个例子。我正在寻找一个一般的解决方案。
where * stands for "fill up the remaining space". Back in the old days that's been the way we layouted width tables. Nowadays due to accesibility reasons html tables are banned for layouts. This is just an example. I'm searching for a general solution.
有人知道一个生成器，一个轻量级的javascript解决方案（可以是一个jQuery插件）教程，书籍或者魔术师，可以帮助我现在和永远解决这个问题？
Does someone know a generator, a lightweight javascript solution (can be a jQuery plugin), a tutorial, a book, or a magician which can help me to solve this problem for now and forevermore?
尽管基于javascript的解决方案是可能的非脚本解决方案将是
Allthough a javascript based solution is possible a non-script solution would be preferred.
推荐答案
您可以使用 display：table 创建此效果，我快速 fiddle
这使得个人 div 的行为像表格单元格，并且 section 是表，我使用一个部分只是为了更清晰的代码， div 也可以工作。
This makes the individual div's act like table cells, and the section is the table, I used a section just to have cleaner code, a div would work too.
您会注意到，如果窗口大小太小，表单元格会比您指定的小，这是因为表的默认行为。要解决这个问题，只需添加最小宽度（与宽度相同的值）
You will notice the table cells get smaller than you specified if the window size is too small, this is because of the table's default behaviour. To combat this just add a min-width (with the same value as the width)
这篇关于布局在CSS表格中像HTML表格中的表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
