Question

我相信很多不同的人都会以不同的方式提出这个问题。我想创建一个页面（或在页面中工作的div），其中包含将具有不可预测的高度的文本元素（段落，列表，表格）（即反映用户输入，数据库内容编辑等）。报纸布局的思考......虽然从一个元素到下一个元素的横向流动是可以接受的。固定的列宽可以，但正如我所说，长度/高度，如果每个项目都会变化并且变化很大。

我一直在尝试各种解决方案，如砌体，同位素，wookmark，freetile等，但还没有取得任何成功......当然我想至少使用一些前CSS3 / HTML5之前的浏览器。你有没有看到任何一个很好的，干净的高效代码来完成这样的事情？感谢您的任何建议/链接。

Answer 1

好;我找到了一些效果很好的东西。不完美，我将不得不面对它，以使其响应缩小/扩展页面，但它是一个开始。它需要我在上面的评论中提到/链接的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>

为文本块或不同长度（高度）的列表创建响应式砌体布局？

1 个答案: