CSS Floating Divs с разной высотой выравниваются с пространством между ними

Я использую левые плавающие DIVs для имитации расположения двух столбцов (каждый div содержит текстовое поле для редактирования разных данных, таких как имя, хобби,...). Таким образом, это должно выглядеть так.

1 2
3 4
5 6

Теперь мои div-боксы не всегда одинаковы, так как некоторые DIV имеют больше элементов, чем другие. Теперь мой макет выглядит как это.

Вы также можете увидеть эффект этот пример, если вы масштабируете его так, чтобы отображались только четыре или три столбца. Например. если в столбце указано 4 столбца, между Float 1 и Float 6 много места. Это не очень хорошо выглядит в моем интерфейсе. Я хочу иметь Float 6 после Float 1 без промежутка между ними (кроме поля, которое я определяю)

Изменить: мои DIVs в основном содержат float: left и width: 40%, так что два раза на экране

Здесь снимок экрана, показывающий больше

Ответ 1

плагин jQuery Masonry будет делать именно то, что вы хотите.

Если вы хотите придерживаться чистого CSS, вы можете сделать что-то вроде следующего, но я не думаю, для чего вы идете:

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

И CSS:

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

Ответ 2

Вот чистое решение CSS. Я взял этот пример

Проверьте, хотите ли вы узнать больше. Он также использует jQuery Masonry как резерв.

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>

Надеюсь, это поможет вам. Спасибо.

Ответ 3

если вы можете использовать php, вот небольшой трюк;)

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

может помочь вам;)

рабочая демонстрация на http://www.showcase.glirp.sk/