6

同じ高さにしたい高さの異なる2つのdiv列があります。これは、div 列に次の css を使用して padding-margin ハックを使用して実現しました。

.lane1 {
    padding-bottom: 800px;
    margin-bottom: -800px;
}

html はフロー図を表示しています。各車線の端から2車線部分の下まで線を引いて、連続した図にしたいと考えています。

図の例

私はクラス .LineFilling を持つ追加の div でこれを達成しようとしました。だから私は入れた

position: absolute;
overflow: hidden;

.lane1-class で高さ 600px の .LineFilling-element を作成しましたが、オーバーフローが表示されるため機能しません。.LineFilling-element をレーンの最後まで拡張する方法はありますか? または、さらに拡張しますが、オーバーフローはカットされますか?

手伝ってくれてありがとう。

編集:ここにコードをオンラインで投稿しました:ここをクリックしてコードを表示します

4

6 に答える 6

5

はい、純粋なcssで可能です。それを実現するために、display table-row および table-cell プロパティを使用しました。

HTML:

<div class="parent">
    <div class="child">
        <p>line 1</p>
    </div>
    <div class="child">
        <p>line 1</p>
        <p>line 2</p>
        <p>line 3</p>
        <p>line 4</p>
    </div>
</div>

CSS:

.parent{display:table-row;}
.child{display:table-cell;border:1px solid #ccc;padding:10px;}
p{margin:5px 0;}

フィドルを参照してください。

更新: 考えられる解決策DEMO

于 2013-10-01T12:48:20.043 に答える
3

純粋な CSS ソリューション

これがそのソリューションのデモです。

この DEMO では、Row複数の が表示されます。各Rowは、マークアップに何も記述せず、幅を固定することなく、可変数の列を持つことができます。(幅は常に列間で均等に分割されます)。各列は と呼ばれElementsHolder、任意の数を持つことができElementsます。

行のすべての列は常に同じ高さになり、行の最後の矢印がそのスペースを埋めます。

DEMO では、3Row秒が表示されます。FirstRowには開始点があるため、ストレッチは必要ありません。2 番目Rowには 3ElementsHolderがあり、マークアップに特別なことは何も記述されていません。そのうちの 2 つは伸びてギャップを埋めます。3番目Rowには 2ElementsHolderがあり、期待どおりに動作します。

Elements の高さに関係なくストレッチが機能することに注意してください。(それらのいくつかには 2 行または 3 行のテキストがあり、完全に機能します)

その手法を使用したい場合は、他の種類のボックスと矢印 (曲線など) を実装するだけで済みます。

この解決策は、新しい CSS flex モデルを使用して行われます。方向は で設定されます。flex-direction: row;各行にはElementsHolders があり、幅が等しくなります。

それらのそれぞれElementsHolderもフレックスボックスですが、今回は彼の方向が反対です ( flex-direction: column;)。

子供のElementsHolderはElements & Arrows です。私はそれらを同じ高さにしたくはありませんが、自然な高さに正確にまたがるようにします。最後の矢印を除いて、コンテナーの残りの部分にまたがる必要があります。

これらはすべてflex、適切な値を持つプロパティを使用して実現されます。

フレックスモデルの詳細については、こちらをご覧ください

于 2013-10-02T11:45:08.217 に答える
2

あなたが必要としているものを本当に理解しているかどうかはわかりません。私は次のことを試しました

を使用してレーンコンテナに新しい絶対要素を追加height: 100%する

#straightLine {
    background-color: #FFBF80;
    height: 100%;
    left: 104px;
    position: absolute;
    width: 3px;
    z-index: 5;
}

さらに、他のいくつかのオブジェクトにいくつかの小さな変更を加えると、フィドルでそれらを見つけることができます...

http://jsfiddle.net/RRupc/9/

そのようなものがあなたが欲しいものですか？

于 2013-10-07T20:57:57.307 に答える
1

FlexBox も一見の価値があります。

IE10+で大丈夫なら

高さの自動整列 (CSS)

align-items: stretch

こことここを読んでください

乾杯、

ロブ

于 2013-10-06T19:16:16.013 に答える
1

divスペースを埋めるために別のクラスを追加するよりdivも、左側の列にクラスを追加し、スペース/行の要件を満たすようにスタイルを設定する方が簡単ではないでしょうか?

したがって、次のことができます。

HTML:

<div class="twoColumn">
    <div class="column">
        <div class="step doubleRow">
            <p>One step covering two rows here</p>
        </div>
    </div>
    <div class="column">
        <div class="step">
            <p>Single size step</p>
        </div>
        <div class="step">
            <p>Single size step</p>
        </div>
    </div>
</div>
于 2013-09-26T10:36:41.880 に答える