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