1

ヘイ諸君！

ここで深刻な問題を抱えています。私は3列のレイアウトでプログラムに取り組んでいます。各列の幅は、スライダーを動かすことで変更できます。ここまでは簡単。

各列には、情報を含む多くの異なる div を表示する必要があります。列のサイズを変更できる可能性があるため、div 自体を最小限のレイアウトにフロートさせたいと考えています。問題は各ブロックの高さが異なることですが、画像は 1,000 語以上を表しています。

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

ご覧のとおり、左側の 2 つの 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でこれを解決しても問題ありません。私はすでに複雑なウィンドウマネージャーを持っていますが、簡単であるほど良いです:)

私はすでにインラインブロック、フロートなどのさまざまなソリューションを試しました。よろしくお願いします! =)

4

0 に答える 0