分割1行文字=底部，分割1行以上=顶部

Question

我有以下HTML和CSS模板：http://jsfiddle.net/qubordgg/1/

这就是我想要归档的内容：http://jsfiddle.net/mLu6ppLe/

正如你在那里看到的，我试图制作一个基于CSS的解决方案，它将把

.text

只有一行文本时，向下一行。但当有超过1行时，它将从顶部开始。

仅在CSS和HTML解决方案中可以实现吗？我不想为此使用JS。

提前谢谢。

Answer 1

position:relative中的position:absolute就是您要查找的：

http://jsfiddle.net/qubordgg/2/

您需要对右边的div说：将自己定位在容器元素的底部。容器必须具有position:relative才能工作。

将你的右侧部分包裹在div中，然后：

.wrap{
    position:absolute;
    bottom:0;
 left:60px;
}
.container {
    margin-top: 30px;
    position:relative;
    height:60px;
}