1

嘿伙计们！

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

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

http://web-tweaks.de/false.png

如您所见，两个左侧 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中解决这个问题没有问题，我已经有一个复杂的窗口管理器，但越简单越好:)

我已经尝试过不同的解决方案，如 inline-block、float 等。提前致谢！=)

4

0 回答 0