Question

我在这里得到一个简单的例子：http://jsfiddle.net/9BCwL/2/

这是关于两列中显示的未排序列表。要排列元素属性“float：left;”用来。在我的例子中你可以看到，第二个项目有一个换行符，如果它太长了。第三项位于左侧，这是正确的。但是由于第二个元素中的换行符，第三个元素和第一个元素之间存在混淆。是否可以使用CSS使用该空间（向上移动第三个元素）？也许有一个我不知道的CSS属性。提前致谢！：）

格尔茨 SY

代码：

HTML：

<div class="my-list">
     <ul>
         <li><span>Element 1</span></li>
         <li><span>This is an extra loooooooong, looooooong Element 2</span></li>
         <li><span>Element 3</span></li>
         <li><span>Element 4</span></li>
         <li><span>Element 5</span></li>
    </ul>
</div>

CSS：

.my-list {
    width: 550px;
    border: 1px solid black;
}
.my-list ul {
    overflow: hidden;
    padding: 5px 0 0 14px;
    margin-top: 10px;
    border-top: 1px solid #D9D9D9;
}
    .my-list ul li {
        float: left;
        padding: 0 0 5px;
        line-height: 20px;
        list-style: none;
        width: 240px;
    border: 1px dotted red;
    }

Answer 1

你可以在jquery示例中使用该插件编写这个jquery masonry这就是你要找的东西。我不确定，但纯粹的css还不够。

是否可以在浮动元素上使用未使用的空间？

1 个答案: