1

それぞれ2つのスパンを持つ一連のdivがあります。2番目のスパンは、列の位置合わせのために絶対的に配置されます。問題は、2番目のスパンのテキストが2行目を強制するのに十分な長さである場合、その行がシーケンス内の次のdivを上書きすることです。

あなたはjsfiddleでそれを見ることができます

ここにいくつかのコードがあります：

<code><div id='container'>
<div class='solodiv'><span class='cvyear' >2011</span><span class='cvtext'>
    <em>Item 1</em>Text that's long enough to force a second line which overwrites the next line</span></div>
<div class='solodiv'><span class='cvyear'>2010</span><span class='cvtext'>
    <em>Item 2</em> Item 2 text, shorter</span></div>
<div class='solodiv'><span class='cvyear'>2008 - 2009</span><span class='cvtext'>
    <em>Item 3</em> Item 3 text, one line only</span></div>

そして.css：

#container {
font-family:sans-serif;
position:absolute;
left:10px;
top:10px;
width:600px,
}
.cvtext {
position:absolute;
left:120px;
width:480px;
}

これに似たトピックがたくさんあることは知っていますが、テーブルを使用する以外に解決策を見つけることができません。やらなくてはいけませんか？

4

2 に答える 2

1

これが私が何かを見逃しているかもしれないという答えを急いでいないことを願っていますが、実際のテーブルを使用せずに設定.cvyearし.cvtextて設定できるように思えます。display: table-cellこれにより、スパンがテーブルセルのように扱われます。

これが私のフィドルです。

そしてCSS：

#container {
  font-family: sans-serif;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 600px,
}

.cvyear {
  display: table-cell;
  width: 120px;
}

.cvtext {
  display: table-cell;
  width: 480px;
}

これはあなたが探しているものですか？

于 2012-12-04T03:22:07.260 に答える
0

CSSを次のように変更します。

#container {
font-family:sans-serif;
position:absolute;
left:10px;
top:10px;
width:600px;
}

.cvtext {
float: left;
width: 480px;
}

.cvyear {
float: left;
width: 120px;
}

これは、この動作を示す修正されたフィドルです。

于 2012-12-04T03:20:38.537 に答える