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宽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布局，所以我确定我错过了一些东西。例如，当我向相关的div添加文字时，无论是one，two还是three，还是内部类，@推荐的调整都是kozlovski5走开了。换句话说，如果我不使用top: -37.5em;并只用文本填充div，那么一切似乎都应该正常工作。当我尝试使用边界部分对布局进行建模时，我得到了奇怪的行为。

我最终选择了花车。请参阅上面的测试站点以获得最终结果。

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/

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

1 个答案: