CODEWITHSUNDEEP
phpjavascripthtmlword-wrap
Jacques Blom
Jacques Blom

Reputation: 1822

Auto "wrap" results from PHP database query

What I would like to do:

-- When I echo my results from a MySQL query, I want to display each one in a square div (this is sorted)

-- I also want to wrap them, so they are all in horisontal rows, but when the screen is not wide enough, some go into a more rows

The second point is the one I'm stuck with. How do I wrap a lot of divs, like word-wrap would do to text?

Thanks!

Upvotes: 0

Views: 218

Answers (2)

pagga
pagga

Reputation: 167

I think this script produces the layout you're asking for:

<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>

Check it out in your HTML editor and see if it looks like what you want. Float:left is the key to getting them to "wrap". Note that the issue is mostly a CSS one, and not a PHP or JS one.

Upvotes: 0

j08691
j08691

Reputation: 208040

Like this jsFiddle example?

CSS:

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

Upvotes: 2

Related Questions