-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;
}

jsフィドル

于 2013-06-24T11:54:47.550 に答える