CSS Floating Divs avec une hauteur différente sont alignés avec l'espace entre eux

je suis en utilisant laissé flottant DIVs pour simuler une disposition en deux colonnes (chaque div contient textfield pour modifier les différentes données, comme le nom, loisirs,...). Donc, il devrait ressembler à ceci

1 2
3 4
5 6

Maintenant, ma div-boîtes ne sont pas toujours les mêmes, depuis quelques DIVs avoir plus d'éléments que les autres. Maintenant, ma mise en page ressemble aime ce

   1 2
     2 
   3 4
   5 6

Vous pouvez également voir l'effet sur cet exemple si vous l'échelle de votre, de sorte que seulement quatre ou trois colonnes sont affichées. E. g. si 4 colonnes sont affichées dans une ligne, il y a beaucoup d'espace entre le Flotteur 1 et Float 6. Cela ne semble pas bon sur mon INTERFACE. Ce que je veux, c'est avoir Flotteur 6 suite à Flotteur 1 avec un pas d'espace entre les deux (à l'exception de la marge je définir)

Edit: Mes DIVs, fondamentalement, tout simplement contenir un float:left et une largeur:40%, de sorte que deux sur un écran

Voici une capture d'écran montrant plus CSS Floating Divs avec une hauteur différente sont alignés avec l'espace entre eux

source d'informationauteur Tim

  1. 7

    La jQuery plugin de Maçonnerie permettra de faire exactement ce que vous voulez.

    Si vous voulais rester avec pur CSS, vous pourriez faire quelque chose comme ce qui suit, mais je ne pense pas que c'est ce que vous allez pour:

    <div class="col">
   <div class="one"></div>
   <div class="three"></div>
   <div class="five"></div>
   <div class="seven"></div>
</div>
<div class="col">
   <div class="two"></div>
   <div class="four"></div>
   <div class="six"></div>
   <div class="eight">who do we appreciate</div>
</div>

    Et le CSS:

    .col {
    float: left;
    width: 200px;
}
  2. 7

    Ici est un pur CSS solution. J'ai pris cette exemple

    Check it out si vous voulez en savoir plus. Il a également utiliser jQuery Maçonnerie comme solution de repli.

    CSS:

    .masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

    HTML:

    <div class="masonry">
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
    <div class="item">Incidunt sit unde minima in nostrum? Incidunt sit unde minima in nostrum?</div>
    <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
    <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
    <div class="item">Incidunt sit unde minima in nostrum?</div>
    <div class="item">Incidunt sit unde minima in unde minima in unde minima in nostrum?</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
    <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>

    Espère que cela va vous aider. Merci.

  3. 1

    si vous pouvez utiliser le php, voici le petit truc 😉

    <?php
$dir = "your/images/dir/";
$img = scandir($dir); //read images to array, or make script which read it from db
unset($img[0], $img[1]); //remove unnecessary ;)

$columns = 5; //define how many columns you want to use
$margin = 5; //define page margin and margin between images in %

//create columns.. 
for ($c = 0; $c < $columns; $c ++)
{
    $main_counter = 0;

    foreach ($img as $file)
    {
        if ($main_counter % $columns == $c)
        {
            $column[$c][] = $file;
        }

        $main_counter ++;
    }
}
?>

<! -- show images -->
<div style="margin: <?php echo $margin; ?>%;">
    <?php
    foreach ($column as $key => $data)
    {
        ?>
        <div style="float: left; width: <?php echo (100 / $columns); ?>%;">
            <?php
            foreach ($data as $image)
            {
                ?>
                <div style="margin-bottom: <?php echo $margin; ?>%; margin-right: <?php echo $margin; ?>%; background-image: url(<?php echo $dir . $image; ?>); background-size: cover;"><img src="<?php echo $dir . $image; ?>" style="visibility: hidden; width: 100%;"></div>
                <?php
            }
            ?>
        </div>
        <?php
    }
    ?>
</div>

    peut-être vous aider 😉

    de travail de démonstration sur http://www.showcase.glirp.sk/