Question

我正在使用左浮动DIV来模拟两列布局（每个div包含用于编辑不同数据的文本字段，如名称，爱好，......）。所以看起来应该是这样的

1 2
3 4
5 6

现在我的div-box并不总是相同，因为有些DIV比其他DIV有更多的元素。现在我的布局看起来像这个

如果您缩放，您还可以在this example上看到效果，只显示四个或三个列。例如。如果连续显示4列，则Float 1和Float 6之间有很多空间。这在我的UI上看起来不太好。我想要的是Float 6跟随Float 1，中间没有空格（除了我定义的边距）

编辑：我的DIV基本上只包含一个浮动：左边和宽度：40％，这样两个适合屏幕

以下是显示更多 alt text

的屏幕截图

Answer 1

jQuery Masonry plugin将完全符合您的要求。

如果您想坚持使用纯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;
}

Answer 2

这是一个纯CSS解决方案。我拿了this示例

如果您想了解更多信息，请查看它。他还使用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>

希望这会对你有所帮助。感谢。

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

上的工作演示

具有不同高度的CSS浮动Div与它们之间的空间对齐

3 个答案: