Html 获取一个浮点数，使其超过多个以前的浮点数

假设我想要一个mobilefirst布局，其中有一列垂直的li元素。 单击移动设备上的任何li元素时，将在其“抽屉”样式下方创建一个新的li，并展开以显示与单击的li元素相关的内容

简单地说：

<ul>
<li>1</li>
<li>2</li>
<li class='data'>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

一,
二,
3
四,
五,
六,

让我们假设你吹出完全相同的布局到桌面模式（如1200像素宽）。现在，布局仍然应该是堆叠的li标记，但当您单击其中一个时，dom中也会发生同样的事情（单击的li下方的新li），但数据应该以2列方式显示在右侧，新li占用ul列右侧的空间。li的顶部，无论单击哪个，都应该与ul元素的顶部平齐

当然，这是可能的，他们说。但是有一个陷阱：

我不想在右边的数据上使用绝对定位，因为当它比ul长时，它会使下面的内容在后面向上移动

当列表中较低的一个li向右浮动时，它不会比上一个li向上移动，尽管我认为我知道浮动

同样，我正在寻找一个CSS唯一的解决方案。我已经用绝对定位/高度修正了这个问题，但我希望高度是动态的

下面是一个JSFIDLE设置，您可以使用几乎正常工作但仍然不完整的布局进行查看：

在这里，您可以看到文本按预期清除了容器的底部，并且它将考虑Li3上的动态高度

但是。。。我想把它全部放在最上面，和李1齐平

有人能解决这个问题吗？这是一个有趣的问题，解决起来会很愉快

这是它应该是什么样子的，但这一个使用了绝对定位/固定高度固定，这允许尾随内容在它后面向上移动，如您所见。

问题是我的内容是动态的。所以这个解决方案远不是理想的。我开始发现我的无js解决方案几乎是不可能的

---

谢谢

抱歉-这几乎就像你说你想建造一座房子，但你不想用木头来建造一个框架。。。有时，为了创建所需的输出，您必须回头看看您对代码所做的是否值得保留。编辑-也就是说-我希望有人能想出一个解决方案，我很好奇它会是什么。我不认为这是不切实际的争取移动第一，逐步增强的框架，不需要JS。。。由于我花了几个小时试图自己弄明白，并对其进行研究，所以我最后的资源也是如此。在我看来，用户应该“只是升级”的想法是缺乏一些东西……也就是说，拥有固定高度的退路并不是世界末日。这不是我的理想：我并不反对“移动”的第一个方面——它更像是，你不想使用绝对定位，不使用javascript，你想用不同的格式来布局你的div来实现这一点。你已经对可行的解决方案进行了限制，以获得你想要的结果。我一直只实现css解决方案，没有绝对定位。这是我试图继续寻找同样令人满意的东西。如果你没有解决办法，那没关系，但只要说出来就行了。告诉我我要求的太多，这是我整个帖子的重点。