私は答えを探していましたが、私の問題を解決するものは見つかりませんでした。
動的コンテンツを含む 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;
}