让我们说我想要一个移动优先布局，其中有一个垂直的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>
让我们说你将完全相同的布局吹到桌面模式（如1200px宽）。现在，布局仍然应该堆叠li标签，但是当你点击一个时，同样的事情应该发生在dom中（在点击的一个下面的新li），但是数据应该以2列的方式显示在右边，新李占据了ul柱右侧的空间。 li的顶部，无论你点击哪一个，都应该与ul元素的顶部相同。
当然，这是可能的，他们说。但！有一个问题：
我不想对右侧的数据使用绝对定位，因为当它长于ul时，它会使低于它的内容向后移动。
当列表中的另一个向下浮动时，它不会比前一个更进一步，尽管我知道浮游物。
同样，我正在寻找一种仅限CSS的解决方案。我已经用绝对定位/高度来修复它，但我希望高度是动态的。
这是一个jsfiddle设置为您检查几乎工作但仍然破坏的布局： http://jsfiddle.net/Mz5RM/6/
在这里，您可以看到文本按预期清除容器底部，并且它将遵循li 3上的动态高度。
但是......我想要它在顶部的方式，与li 1齐平。
有人有解决方案吗？这是一个很有趣的问题，很难解决。
这是它应该是什么样的，但是这个使用绝对定位/固定高度修复，它允许尾随内容在它后面向上移动，如你所见。 http://jsfiddle.net/Mz5RM/5/
问题是我的内容是动态的。所以这个解决方案远非理想。我开始看到我的no-js解决方案几乎不可能......
谢谢！