web-dev-qa-db-ja.com

Display Suiteの「fluid」列とは何ですか？

Display Suiteの「流体」とは何ですか？左25％、右75％の2列のレイアウトを作成します。流動的な2列のレイアウトが必要ですか？

7display-suite
3
vintorg

Display Suiteでは、「流体」は、1つ（または複数）の列が空の場合に列の幅を拡張するテンプレート機能を指します。

2列のレイアウトの場合、CSSは次のとおりです。

.ds-2col > .group-left {
  float: left; /* LTR */
  width: 50%;
}

.ds-2col > .group-right {
  float: left; /* LTR */
  width: 50%;
}

したがって、.group-rightにコンテンツがない場合でも、.group-left要素は使用可能な幅の50％しか占めません。

流動的な2colレイアウトの場合、CSSは次のとおりです。

.ds-2col-fluid > .group-left {
  float: left; /* LTR */
  width: 50%;
}

.ds-2col-fluid > .group-right {
  float: right; /* LTR */
  width: 50%;
}

.ds-2col-fluid.group-one-column > .group-left,
.ds-2col-fluid.group-one-column > .group-right {
  width: 100%;
  float: none;
}

最後のルールセット（ '.group-one-column'を含むもの）は、いずれかの列にコンテンツが含まれていない場合、もう一方の列は使用可能な幅の100％まで拡大することを意味します。テンプレートに追加のCSSクラスを追加するPHPロジックの小さな部分を次に示します。 http://drupalcode.org/project/ds.git/blob/refs /heads/7.x-2.x:/layouts/ds_2col_fluid/ds-2col-fluid.tpl.php

あなたの場合はどちらでもかまいませんが、25％/ 75％の分割を取得するには、独自のテーマのスタイルシートでDS CSSコードをオーバーライドする必要があります。

あなたは次のようなものを使うことができます

body .ds-2col .group-left {
    width: 25%;
}  
body .ds-2col .group-right {
    width: 75%;
}
8
Paul Bennett

fluidWordは、利用可能な領域に収まるように拡張される要素を参照するために使用されます。つまり、この場合は、2つの列に50%両方が入力されている場合はそれぞれの幅、または100%幅が1つだけ入力されている場合。

新しいDisplay Suiteレイアウトを使用して目標を達成するには、テーマにカスタムDisplay Suiteレイアウトを実装する必要があります。

これは、このテーマを扱っているDisplay Suiteのドキュメントページへのリンクです。

https://drupal.org/node/1098068

1
revagomes

通常、CSSコーディングを取り除くには、「3列の流体-25/50/25」を使用して、「左」列と「中央」列にのみコンテンツを配置するのが速い方法です。

右側の列にコンテンツを残さないことにより、コンテンツは折りたたまれ、中央の列は要求に応じて50％から75％に拡大します。

0
WhiteWinterWolf