中心部分不适合 3 列响应式 CSS 布局

Question

我有一个效果很好的 3 列布局：

http://jsfiddle.net/nicorellius/YNyHW/7/

我的目标是在中心div 中添加一个预先存在的模块化单元，即具有two-inner 类的单元。标记是这样的：

<html>
<head></head>
<body>
<div>  
    <div class="container">       
        <div class="one">
            <div class="one-inner"></div>
        </div>               
        <div class="two">
            <div class="two-inner"></div>
        </div>                       
        <div class="three">
            <div class="three-inner"></div>
        </div>    
    </div>
</div>
</body>
</html>

可以在fiddle 中看到 CSS。模块化单元的一部分实际上是由一些 PHP 构建的，其中从数据库中获取和显示一些数据。我有一些用于测试的数组，它们模拟 6 个条目，并为模块化单元提供 2 宽 x 3 高的盒子布局。我的问题是，当我将此单元添加到上面的布局中时，我会得到类似于下面的测试站点的内容。

模块化单元的标记如下：

<section class="unit">
    <section class="buttons margin-top-2em">
        <div class="button-fixed-width">
            <button type="button" class="<bootstrap-button>">button 1</button>
        </div>
        <div class="button-fixed-width">
            <button type="button" class="<bootstrap-button>">button 2</button>
        </div>
        <div class="button-fixed-width">
            <button type="button" class="<bootstrap-button>">button 3</button>
        </div>
    </section>
    <div class="row">   
        <?php // loop through some arrays to get module unit ?>
    </div>
</section>

我已经尝试了各种调整来尝试让它上升，但唯一能做的就是使外部类one、two 和three 的高度接近于零。

虽然我已经尝试改变高度和其他位以使其适合，但我仍然无法弄清楚为什么该中心 div 不会上升。我错过了什么？

unit 类的 CSS 在小提琴中。就其本身而言，它可以正常工作，并且我有一些断点可以将其折叠成一列。我只是无法通过这部分...

编辑

在尝试了@kozlovski5 的一些想法后，我可以根据需要让div上下移动。但是有一些事情让我感到不安。我对display: table、display: table-cell 布局不太熟悉，所以我确定我错过了一些东西。例如，当我向有问题的divs、one、two 或three 类或内部类添加文本时，@kozlovski5 建议的调整消失了。所以换句话说，如果我不使用top: -37.5em; 而只是用文本填充divs，一切似乎都可以正常工作。当我尝试使用带边框的部分对布局进行建模时，我得到了奇怪的行为。

我最终选择了花车。最终请参见上面的测试站点。

Answer 1

我申请了：

div > .modular {
    display: block;
}

这似乎解决了问题。这是一个更新的 jsFiddle。 http://jsfiddle.net/YNyHW/4/

OP 已经为他的网站提供了一个测试用例，所以我更新的答案是：

.two-inner {
    background-color: #cba;
    border: 1px solid gray;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    top: -596px;
    left: 0;
}

Ugghhh.. 另一个编辑

我认为整个display: table 和div > div. { display: table-cell;} 都导致了这个问题，而不是处理补丁，让我们直接解决问题而不是修复问题。

只需摆脱显示表等。并使用浮点数代替这里是一个例子： http://jsfiddle.net/YNyHW/6/