PHP数据库查询的自动“包装”结果

Question

我想做的是：

--当我回显来自一个MySQL查询的结果时，我希望在一个正方形的div中显示每个结果(这是排序的)

--我也想把它们包装起来，所以它们都是按层次排列的，但是当屏幕不够宽时，有些会变成更多的行()。

第二点是我被困住的那一点。我如何包装大量的div，就像文字包装对文本的作用一样？

谢谢!

Answer 1

像这样的jsFiddle实例

CSS：

div {
    border:1px solid #999;
    width:30px;
    height:30px;
    float:left;
    margin:4px;
}

Answer 2

我认为这个脚本产生了您想要的布局：

<html><head><script>
    // dummy code to simulate varying width text received from a database
    var pullFromDatabase = function(){
        str = new String()
        for(var i = Math.round(Math.random()*10)+1; i > 0; i--)
            str += "Data! "
        return str
    }

    window.onload = function(){
        for(var i = 10; i > 0; i--){
            newDiv = document.createElement('div')
            newText = document.createTextNode(pullFromDatabase())
            newDiv.appendChild(newText)
            document.body.appendChild(newDiv)
        }
    }
</script><style>
    div { float: left; width: 200px; height: 200px; border-width: 1px; border-style: solid; border-color: black }
</style></head><body>

</body></html>

在HTML编辑器中查看它，看看它是否像您想要的。左是让它们“包装”的关键。请注意，问题主要是CSS问题，而不是PHP或JS问题。