0

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

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

我的目标是在中心添加一个预先存在的模块化单元div，即带有 class 的单元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>

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

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

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

编辑

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

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

4

1 回答 1

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/

于 2013-11-02T20:28:43.893 回答