Using jQuery or CSS to place dynamic divs of unknown height_问答_开发者

Using jQuery or CSS to place dynamic divs of unknown height

开发者 https://www.devze.com 2023-02-27 05:31 出处：网络

How do I accomplish this with this - each div is generated in the order shown on the server and has unknown height:

相关专题：css jquery

How do I accomplish this

Using jQuery or CSS to place dynamic divs of unknown height

with this - each div is generated in the order shown on the server and has unknown height:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>Untitled</title>
    <style type="text/css">
    div {width:100px;color:white;background-color:grey;border:solid 5px black; margin:2px}
    .wrapper {width:331px;height:400px;border:solid 1px black;float:left;}
    </style>
  </开发者_开发技巧head>
<body>
    <form id="form1" runat="server">
   <div class="wrapper">
    <div class="shortDiv" style="float:left;">1 some stuff</div>
    <div class="tallDiv" style="float:left;">2 some stuff some stuff</div>
    <div class="shortDiv" style="float:left;">3 some stuff</div>
    <div class="shortDiv" style="float:left;">4 some stuff</div>
    <div class="shortDiv" style="float:left;">5 some stuff</div>
    <div class="shortDiv" style="float:left;">6 some stuff</div>
    <div class="tallDiv" style="float:left;">7 some stuff some stuff</div>
    <div class="shortDiv" style="float:left;">8 some stuff</div>
    <div class="shortDiv" style="float:left;">9 some stuff</div>
</div>
    </form>
</body>

Good old jQuery Masonry might help you here:

http://desandro.com/resources/jquery-masonry/

If you want to do with CSS you can do in the following way:

Create 3 columns (or more) with float:left; and a fixed width
Put into each column the elastic boxes, the height is defined based on the context of the box