div 位置内的 css div

Question

我有一个包含 3 个其他 div 容器的 div 主容器。

我希望 3 个子 div 保持居中并始终处于相同的高度(在父 div 的顶部)。

我的问题是，当我调整窗口浏览器大小时，子 div 位于另一个下方。我不想要这个。

我还为 768 像素以下添加了一个 css 条件。在这种情况下，我希望子 div 位于其他 div 之下。

这是一个 fiddle 示例:http://fiddle.jshell.net/mCXWs/

在这个 fiddle 中，对于 768px 以上的窗口浏览器，子级蓝色 div 位于绿色下方，黄色位于蓝色下方。我不要这个结果。我希望停留在相同的高度(顶部:0；)

我不知道该怎么办...

对不起英语，我是法国人

Answer 1

• 3 个方 block 高度相同？使用 CSS 表格布局:display: table 和 display: table-cell (IE8+)
• 一个( block 显示为)“单元格”永远不会低于另一个“单元格”，问题已经解决(编辑:在同一个隐式行中)
• 水平居中？在容器上使用 margin: 0 auto;
• 在父 div 的顶部？使用 vertical-align: top。
• 在 768px 下(在 MQ @-rule 中)，只需通过 display:block 覆盖 table(-cell) 并且 div 将表现得像默认 div，一个在另一个下面.也许您还必须覆盖最小/最大高度。
• 尽可能避免 overflow: hidden 和 position: relative(好吧，用表格...)

工作示例:http://fiddle.jshell.net/EEEjg/1/