Question

我想制作可以显示2行的布局。它看起来像这样：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, |

当我调整浏览器大小时，这就是我得到的：

Lorem ipsum dolor sit amet, |
consectetuer adipiscing elit|
,                           |
Lorem ipsum dolor sit amet, |
consectetuer adipiscing elit|
,                           |

然而这就是我希望它看起来像：

Lorem ipsum dolor sit amet, |
Lorem ipsum dolor sit amet, |
consectetuer adipiscing elit|
consectetuer adipiscing elit|
,                           |
,                           |

如何使我想要的布局成为可能？谢谢。

Answer 1

如果你要有超过2个元素，你需要调整top / line-height值的数学。

http://cssdeck.com/labs/fhthacxq

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

body { /* container element */
  position: relative;
}

p {
  margin: 0;
  line-height: 2.5em; /* top * number of elements */
  margin-bottom: 1.25em; /* same as top */
}

p + p {
  top: 1.25em; /* 1em + distance from previous line */
  position: absolute;
}

Answer 2

仅使用HTML和CSS，您需要将文本排列为单词列以实现所需的效果。这是因为您实际上是在改变单词的顺序，因此需要对它们进行不同的分组。

以下是一个例子。

<强> HTML：

<div>Lorem<br/>Lorem</div>
<div>ipsum<br/>ipsum</div>
<div>dolor<br/>dolor</div>
<div>sit<br/>sit</div>
<div>amet<br/>amet</div>

<强> CSS：

div {
    display: inline-block;
}

<强> jsFiddle

用于分组两行或更多行的HTML布局

2 个答案: