Css 为不同长度（高度）的文本块或列表创建响应性砖石布局？
我相信很多不同的人都以不同的方式问过这个问题。我想创建一个包含高度不可预测的文本元素（段落、列表、表格）（即反映用户输入、数据库内容编辑等）的页面（或在页面中工作的div）……想想报纸布局……尽管从一个元素到下一个元素的水平流是可以接受的。固定列宽是可以的，但正如我所说的，如果每个项目都会发生变化，那么长度/高度会有很大的变化Css 为不同长度（高度）的文本块或列表创建响应性砖石布局？,css,list,text,responsive-design,masonry,Css,List,Text,Responsive Design,Masonry,我相信很多不同的人都以不同的方式问过这个问题。我想创建一个包含高度不可预测的文本元素（段落、列表、表格）（即反映用户输入、数据库内容编辑等）的页面（或在页面中工作的div）……想想报纸布局……尽管从一个元素到下一个元素的水平流是可以接受的。固定列宽是可以的，但正如我所说的，如果每个项目都会发生变化，那么长度/高度会有很大的变化 我一直在尝试各种解决方案，如砌石、同位素、wookmark、freetile等，但尚未在这些方面取得任何成功……当然，我希望至少使用一些CSS3/HTML5之前的浏览器。
我一直在尝试各种解决方案，如砌石、同位素、wookmark、freetile等，但尚未在这些方面取得任何成功……当然，我希望至少使用一些CSS3/HTML5之前的浏览器。你们有谁看到过任何漂亮、干净、高效的代码来完成这样的事情吗？感谢您的建议/链接。好的；我发现了一些很有效的方法。这并不完美，我将不得不对其进行一些处理，以使其对缩小/扩大页面做出响应，但这只是一个开始。它需要我在上面的评论中提到/链接的ftcolumnflow脚本
<html>
<head>
<script type="text/javascript" src="ftcolumnflow/src/FTColumnflow.js"></script>
<style>
body { margin: 0px; padding: 0; text-align: center;}
p {text-align: left;}
img {width: 100%;}
#viewport { width: 950px; height: 400px; margin-left: auto; margin-right: auto;}
#flowedContent, #fixedContent { margin: 0px; visibility: hidden; }
body { font: 14px Helvetica,arial,freesans,clean,sans-serif; color: #333; font-size: 14px; line-height: 1.0; }
a { color: #4183C4; text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { outline: none; }
ul {
margin: 0px;
padding-left: 0px;
border: solid thin black;
}
.listhead {text-align: left; color: white; background-color: #004000;}
li {
line-height: 1.0;
text-align: left;
list-style: none;
}
li.c1 {
background-color: #d6d6d6;
}
li.c2 {
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="viewport">
<div id="target"></div>
</div>
<div id="flowedContent">
<p class="nowrap">Vestibulum gravida metus vel est vehicula porta ac a nisi. Integer eleifend leo non lectus sodales lacinia. Vestibulum consequat elit sit amet purus varius, id semper augue tincidunt. Quisque vestibulum, sem in imperdiet ultrices, quam arcu pretium mi, eget bibendum felis lacus convallis tellus. Ut id fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante ex, pharetra id consectetur in, molestie a arcu.</p>
<ul class="nowrap"><li class="listhead">group_1</li>
<li class="c1"><a target=_blank href="link_1(1)">link_1(1)</a></li>
</ul>
<ul class="nowrap"><li class="listhead">group_2</li>
<li class="c1"><a target=_blank href="link_2(1)">link_2(1)</a></li>
<li class="c2"><a target=_blank href="link_2(2)">link_2(2)</a></li>
<li class="c1"><a target=_blank href="link_2(3)">link_2(3)</a></li>
<li class="c2"><a target=_blank href="link_2(4)">link_2(4)</a></li>
<li class="c1"><a target=_blank href="link_2(5)">link_2(5)</a></li>
</ul>
<ul class="nowrap"><li class="listhead">group_3</li>
<li class="c1"><a target=_blank href="link_3(1)">link_3(1)</a></li>
<li class="c2"><a target=_blank href="link_3(2)">link_3(2)</a></li>
<li class="c1"><a target=_blank href="link_3(3)">link_3(3)</a></li>
</ul>
<ul class="nowrap"><li class="listhead">group_4</li>
<li class="c1"><a target=_blank href="link_4(1)">link_4(1)</a></li>
<li class="c2"><a target=_blank href="link_4(2)">link_4(2)</a></li>
<li class="c1"><a target=_blank href="link_4(3)">link_4(3)</a></li>
<li class="c2"><a target=_blank href="link_4(4)">link_4(4)</a></li>
<li class="c1"><a target=_blank href="link_4(5)">link_4(5)</a></li>
</ul>
<p class="nowrap">Vestibulum gravida metus vel est vehicula porta ac a nisi. Integer eleifend leo non lectus sodales lacinia. Vestibulum consequat elit sit amet purus varius, id semper augue tincidunt. Quisque vestibulum, sem in imperdiet ultrices, quam arcu pretium mi, eget bibendum felis lacus convallis tellus. Ut id fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante ex, pharetra id consectetur in, molestie a arcu.</p>
<ul class="nowrap"><li class="listhead">group_5</li>
<li class="c1"><a target=_blank href="link_5(1)">link_5(1)</a></li>
<li class="c2"><a target=_blank href="link_5(2)">link_5(2)</a></li>
<li class="c1"><a target=_blank href="link_5(3)">link_5(3)</a></li>
<li class="c2"><a target=_blank href="link_5(4)">link_5(4)</a></li>
<li class="c1"><a target=_blank href="link_5(5)">link_5(5)</a></li>
<li class="c2"><a target=_blank href="link_5(6)">link_5(6)</a></li>
<li class="c1"><a target=_blank href="link_5(7)">link_5(7)</a></li>
<li class="c2"><a target=_blank href="link_5(8)">link_5(8)</a></li>
</ul>
<ul class="nowrap"><li class="listhead">group_6</li>
<li class="c1"><a target=_blank href="link_6(1)">link_6(1)</a></li>
<li class="c2"><a target=_blank href="link_6(2)">link_6(2)</a></li>
<li class="c1"><a target=_blank href="link_6(3)">link_6(3)</a></li>
<li class="c2"><a target=_blank href="link_6(4)">link_6(4)</a></li>
</ul>
<ul class="nowrap"><li class="listhead">group_7</li>
<li class="c1"><a target=_blank href="link_7(1)">link_7(1)</a></li>
<li class="c2"><a target=_blank href="link_7(2)">link_7(2)</a></li>
</ul>
<p class="nowrap">Duis fermentum lorem suscipit arcu tincidunt, at consectetur mi euismod. Mauris ultrices diam ac lectus suscipit mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus mauris odio, vel lobortis felis commodo vel..</p>
</div>
<script type="text/javascript">
var cf = new FTColumnflow('target', 'viewport', {
columnCount: 3,
standardiseLineHeight: false,
pagePadding: 0,
});
cf.flow(document.getElementById('flowedContent'), document.getElementById('fixedContent'));
</script>
</body>
</html>
正文{margin:0px；padding:0；文本对齐：居中；}
p{text align:left；}
img{宽度：100%；}
#视口{宽度：950px；高度：400px；左边距：自动；右边距：自动；}
#flowedContent，#fixedContent{边距：0px；可见性：隐藏；}
正文{字体：14px Helvetica，arial，freesans，clean，无衬线；颜色：#333；字体大小：14px；线条高度：1.0；}
a{color:#4183C4；文本装饰：无；}
a:悬停{文本装饰：下划线；}
a:活动{大纲：无；}
保险商实验室{
边际：0px；
左侧填充：0px；
边框：实心薄黑色；
}
.listhead{文本对齐：左；颜色：白色；背景色：#004000；}
李{
线高：1.0；
文本对齐：左对齐；
列表样式：无；
}
li.c1{
背景色：#D6；
}
li.c2{
背景色：#ffffff；
}
孕妇前庭的交通水平。整型eleifend leo non lectus sodales lacinia。前庭由精英组成，由奥古斯丁担任主席。Quisque前庭，不安全饮食中的扫描电镜，前庭区，猫科动物。发酵液。Lorem ipsum dolor sit amet，是一位杰出的献身者。但在前，在后，在后，在后一段时间内，在后一段时间内
第1组
第二组
第三组
第四组
孕妇前庭的交通水平。整型eleifend leo non lectus sodales lacinia。前庭由精英组成，由奥古斯丁担任主席。Quisque前庭，不安全饮食中的扫描电镜，前庭区，猫科动物。发酵液。Lorem ipsum dolor sit amet，是一位杰出的献身者。但在前，在后，在后，在后一段时间内，在后一段时间内
第五组
第六组
第七组
在米尤伊斯穆德的康塞特特，有两种发酵液。毛里斯·乌尔特里斯（Mauris ultrices diam ac lectus suscipit mollis）。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。这是我的朋友，我的朋友
var cf=新FTColumnflow（'目标'，'视口'{
列数：3，
standardiseLineHeight:false，
页面填充：0，
});
cf.flow（document.getElementById（'flowedContent'）、document.getElementById（'fixedContent'）；
- s等内容是通过php点击MySQL动态生成的。它们将随着用户/管理员的输入而不时更改。最有用的是class=“nowrap”，它可以应用于段落和列表，这样它们就不会在列之间断开（当我不希望它们断开时）。据说这个类也可以处理图像，但目前这似乎对我来说并不正确。