CSS定位 - 從浮動元素填充空白

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

來源

2015-05-31 user2122017

要麼你把它在垂直3行發生在那裏的元素，或者你必須用一些數學這是相當難的絕對位置他們。但不用擔心，有一個偉大的插件masonry爲您處理它。

祝你好運！

來源

2015-05-31 13:10:05 LVDM

CSS定位 - 從浮動元素填充空白

回答

相關問題