Question

这是我的样式，包含左浮动和固定宽度。

<style>
ul { width:600px; }
ul li  { list-style:none; float:left; width:49%; border:1px solid; }

这是我的Html

<ul>
<li>testing</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a </li>
<li>testing</li>
<li>testing</li>
<li>testing</li>
<li>testing</li>
<li>testing</li>
<li>testing</li>

现在，输出将是这样的：第一个li元素将取第二个大li元素的高度。第三个li元素将以第一个li元素下的大量空格开始。

如何删除此空间。可以把我的第三个li块放在我的第一个li块下面吗？

Answer 1

这需要使用jQuery来完成。

这是其中一个插件。

http://www.jqueryscript.net/layout/Dynamic-Grid-Layout-Plugin.html

Answer 2

如果您可以在项目中使用CSS3，这里有一个工作示例：http://jsfiddle.net/T7ttY/

以下是HTML代码：

<div id="flexbox"><div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div><div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div><div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div></div>

这是Css代码：

 #flexbox{display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: start;-webkit-box-align: start;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: start;-moz-box-align: start;display: box;box-orient: horizontal;box-pack: start;box-align: start;overflow: hidden;width: 100%;}#flexbox .col{padding: 30px 3% 0;width: 27%;margin-bottom: -99999px;padding-bottom: 99999px;}#flexbox .col p{margin-bottom: 30px;}#flexbox .col:nth-child(1){background: #ccc;}#flexbox .col:nth-child(2){background: #eee;}#flexbox .col:nth-child(3){background: #eee;}

对于格式不正确的代码感到抱歉。

Answer 3

您需求的唯一解决方案是使用JQUERY。

只有css才能达到这个目的。

Please check this link for demo

使用左浮动时如何删除块下方未使用的空间。

3 个答案: