CSS定位 - 从浮动元素填充空白

时间：2015-05-31 13:02:39

标签： html css

如何定位Box4以便将其推向Box1？

enter image description here

期待您的建议和任何帮助将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="align.css">
</head>
<body>
    <div>
        <section class="boxes">
        <b>BOX1</b>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
    </section>
    <section class="boxes">
    <b>BOX2</b>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
    </section>
    <section class="boxes">
    <b>BOX3</b>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
    </section>
    <section class="boxes">
    <b>BOX4</b>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
    </section>
    <section class="boxes">
    <b>BOX5</b>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
    </section>
</div>


.boxes {
    width: 500px;
    border: 1px solid black;
    float: left;
}

1 个答案:

答案 0 :(得分：0)

要么将它划分为3行，要么将元素放在那里，要么必须用一些非常难的数学来对它们进行绝对定位。但不用担心，有一个很棒的插件masonry可以为你处理它。

祝你好运！

相关问题
最新问题