Question

Hej伙计们！

我在这里遇到了严重的问题。我正在开发一个具有3列布局的程序。可以通过移动滑块来更改每个列宽。到目前为止很容易。

在每个专栏中，我需要向许多不同的div显示信息。由于可能会调整列的大小，我希望div将自己浮动到最小的布局。问题是每个街区的高度不同，但是一张图片说的字数超过千字：

如你所见，左边两个div之间有一个很大的空间。这就是我希望它看起来： http://web-tweaks.de/true.png

div的高度是全动态的，因此很难在代码中重新排列，因为其中许多是动态创建的。（他们可以拖着重新安排......）。

这是HTML部分：

<div class="_content">
                <div class="_dt_floating_container">
                    <div class="_title">Stammdaten</div>
                    PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>
                    PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>
                </div>
                <div class="_dt_floating_container">
                    <div class="_title">Bankdaten</div>
                    PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>
                    PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>
                    PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>
                    PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>
                </div>
                <div class="_dt_floating_container">
                    <div class="_title">Stammdaten</div>
                    PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>
                    PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>PLACEHOLDER <br>
                </div>
            </div>

和css：

._dt_floating_container {
    padding: 0px;
    background-color: red;
    min-width: 400px;
    display: inline-block;
    margin: 0 10px 10px 0;
    vertical-align: top;
}

._dt_floating_container > ._title {
    width: 100%;
    margin: 0px;
    background-color: green;
    min-height: 20px;
    padding: 2px; 
}

JSFiddle：http://jsfiddle.net/zfxEG/ 如果您调整列大小，您将看到问题。

纯CSS还能实现这一点吗？在JS中解决这个问题没问题，我已经有了一个复杂的窗口管理器，但是更容易做到：）

我已经尝试了不同的解决方案，如内联块，浮动等。提前致谢！ =）

自动排列不同大小和浮动的div

0 个答案: