-1

我想制作可以显示 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|
,                           |
,                           |

我怎样才能使我想要的布局成为可能？谢谢你。

4

2 回答 2

1

如果您将拥有 2 个以上的元素，则需要调整顶部/行高值的数学运算。

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;
}
于 2013-06-24T11:57:38.710 回答
0

仅使用 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

于 2013-06-24T11:54:47.550 回答