我有一个 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>
CSS 可以在 fiddle 中看到.模块化单元的一部分实际上是由一些 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>
我已经尝试了各种调整来试图让它起来，但唯一能做到的是使外部类的高度一个，两个，和three 接近于零。
虽然我已经尝试更改高度和其他位以使其适合，但我仍然无法弄清楚为什么中心 div 不会上升。我错过了什么？
unit 类的 CSS 在 fiddle 中。就其本身而言，它工作正常，并且我有一些断点将其折叠成一个列。我只是无法通过这部分...
编辑
在尝试了@kozlovski5 的一些想法后，我能够让 div 根据需要上下移动。但是发生了一些事情让我感到不安。我不太熟悉 display: table、display: table-cell 布局，所以我确定我遗漏了什么。例如，当我向相关的 div 添加文本时，类 one、two 或 three 或内部类，@kozlovski5 推荐的调整消失了。所以换句话说，如果我不使用 top: -37.5em; 并且只是用文本填充 div，一切似乎都可以正常工作。当我尝试使用带边框的部分对布局进行建模时，出现了奇怪的行为。
我最终改用了花车。请参阅上面的测试站点以获取最终结果。
最佳答案
我申请了:
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;
}
啊..另一个编辑
我认为整个display:table和div>div。 { display: table-cell;} 是导致这个问题的原因，我们不去打补丁，而是直接解决问题，而不是去修复。
只是去掉显示表等。使用 float 代替这里是一个例子: http://jsfiddle.net/YNyHW/6/
关于css - 中心部分不适合 3 列响应式 CSS 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19746145/