CSS动态响应列布局 [英] CSS dynamic responsive column layout
问题描述
我一直在寻找答案，但找不到解决我问题的任何东西。
我有一个有动态内容的网站。
这些项目具有动态高度。
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
但是当浏览器窗口调整大小时，我想将内容放在列表中，
我知道媒体查询，但是我应该如何配置它，使它在窗口足够宽时流入一个2列布局？ / p>
同样重要的是，项目（下面的HTML中的groupdiv）不会在底部分成两半。
内容HTML（使用KnockoutJS作为动态数据，groupsContainer中的内容因groupsContainer中的foreach属性而重复）：
< div data-bind =foreach：$ data.groupsclass =groupsContainer>
< div class =group>
< div data-bind =text：$ data.nameclass =groupTitle>< / div>
< table data-bind =foreach：$ data.fieldsclass =fieldsContainer>
< tr>
< td data-bind =text：$ data.nameclass =fieldName>< / td>
< td data-bind =template：{name：$ data.typeId，data：$ data}class =fieldValue>< / td>
< td class =valueChangeddata-bind =if：$ data.valueChanged>< img
src =resources / images / control-state-edited.png/> ;< / td>
< / tr>
< / table>
< / div>
< / div>
CSS：
code> .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;
}
不是文本 - 下面仍然可以工作，只需将项目包装到一个容器中使用下面的CSS应用（ div 与 id 或 class 这个容器）。
看看下面 - 列会自动压缩而不需要媒体查询。
Demo Fiddle
CSS：
html，body {
宽度：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和（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限制打破* /
break-inside：avoid-column;
-webkit-column-break-inside：avoid;
page-break-inside：avoid;
overflow：hidden; / * optional * /
display：inline-block; / * optional * /
}
也就是说，请注意，浏览器之间的功能支持patchy，如果它不能按预期工作，用 display：table; 替换 display：inline-block; 。
I have been searching for answers but could not find anything that solves my problem.
I have a website with dynamic content. What I want is that the content flows into columns when possible, in order to minimize scrolling.
The items have dynamic heights.
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
But when the browser window is resized, I want to put the content in a list, so a one-column table.
I know about media queries, but how should I configure it so that it flows into a 2-column layout when the window is wide enough?
It is also important that the items (the "group" div in the HTML below) are not split in half at the bottom.
The content HTML (using KnockoutJS for the dynamic data, the content inside groupsContainer is repeated because of the foreach attribute in 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;
}
Although you are using items and not text- the below will still work, simply wrap the items into a container with the below CSS applied (replace div with the id or class of this container).
Have a look at the below- the columns will automatically compress at a smaller screen size without the need to media queries.
Demo Fiddle
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;
}
Alternatively- with Media Queries
If you want more control- you can simply use a media query to apply columns at sizes above that specified (below being 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;
}
}
Preventing elements from breaking between columns
To avoid elements from being broken between columns, you can use the below:
.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 */
}
That said, note that functionality support between browsers may be patchy, if it isnt working as expected, replace display:inline-block; with display:table; or remove entirely.
这篇关于CSS动态响应列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
