6

私は答えを探していましたが、私の問題を解決するものは見つかりませんでした。

動的コンテンツを含む Web サイトがあります。私が望むのは、スクロールを最小限に抑えるために、可能な場合はコンテンツが列に流れ込むことです。

アイテムには動的な高さがあります。

  xxx item 1 xxx  |  xxx item 4 xxx
  xxxxxxxxxxxxxx  |  xxxxxxxxxxxxxx
  xxxxxxxxxxxxxx  |------------------
------------------|  xxx item 5 xxx
  xxx item 2 xxx  |  xxxxxxxxxxxxxx
  xxxxxxxxxxxxxx  |------------------
------------------|  xxx item 6 xxx
  xxx item 3 xxx  |  xxxxxxxxxxxxxx
  xxxxxxxxxxxxxx  |  xxxxxxxxxxxxxx

しかし、ブラウザー ウィンドウのサイズが変更されたら、コンテンツをリストに入れたいので、1 列のテーブルにします。

メディア クエリについては知っていますが、ウィンドウが十分に広い場合に 2 列のレイアウトに流れるようにするには、どのように構成すればよいですか?

項目 (以下の HTML の「グループ」div) が下部で半分に分割されていないことも重要です。

コンテンツ HTML (動的データに KnockoutJS を使用。groupsContainer の foreach 属性により、groupsContainer 内のコンテンツが繰り返されます):

<div data-bind="foreach: $data.groups" class="groupsContainer">
    <div class="group">
        <div data-bind="text: $data.name" class="groupTitle"></div>
        <table data-bind="foreach: $data.fields" class="fieldsContainer">
            <tr>
                <td data-bind="text: $data.name" class="fieldName"></td>
                <td data-bind="template: { name: $data.typeId, data: $data}" class="fieldValue"></td>
                <td class="valueChanged" data-bind="if:$data.valueChanged"><img
                    src="resources/images/control-state-edited.png" /></td>
            </tr>
        </table>
    </div>
</div>

CSS:

.groupsContainer {
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid #eee;
    -webkit-column-count: 2;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee;
    -moz-column-count: 2;
    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee;
    -ms-column-count: 2;
    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee;
    column-count: 2;
}
4

1 に答える 1

10

テキストではなくアイテムを使用していますが、以下は引き続き機能しますが、以下の CSS が適用されたコンテナーにアイテムをラップするだけです (このコンテナーdividまたはclassに置き換えます)。

以下をご覧ください。列は、メディア クエリを必要とせずに、より小さい画面サイズで自動的に圧縮されます。

デモフィドル

CSS:

html, body {
    width:100%;
}
div {
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid #eee;
    -webkit-column-count: 2;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee;
    -moz-column-count: 2;
    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee;
    -ms-column-count: 2;
    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee;
    column-count: 2;
}

または、メディアクエリを使用

さらに制御したい場合は、メディアクエリを使用して、指定されたサイズを超えるサイズ (1024 未満) で列を適用できます。

html, body {
    width:100%;
}
@media screen and (min-width: 1024px){
    div {
        -webkit-column-width: 20em;
        -webkit-column-gap: 2em;
        -webkit-column-rule: 1px solid #eee;
        -webkit-column-count: 2;
        -moz-column-width: 20em;
        -moz-column-gap: 2em;
        -moz-column-rule: 1px solid #eee;
        -moz-column-count: 2;
        -ms-column-width: 20em;
        -ms-column-gap: 2em;
        -ms-column-rule: 1px solid #eee;
        -ms-column-count: 2;
        column-width: 20em;
        column-gap: 2em;
        column-rule: 1px solid #eee;
        column-count: 2;
    }
}

列間で要素が壊れないようにする

列間で要素が壊れないようにするには、以下を使用できます。

.group{ /* class to restrict breaking on */
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden; /* optional */
    display:inline-block; /* optional */
}

とはいえ、ブラウザ間の機能サポートは不完全である可能性があることに注意してください。期待どおりに機能しない場合は、完全に置き換えるdisplay:inline-block;display:table;削除してください。

于 2014-05-09T09:17:09.760 に答える