1

我有一系列 div，每个 div 有两个跨度。第二个跨度绝对定位为列对齐。问题是如果第二个跨度中的文本足够长以强制第二行，则该行会覆盖序列中的下一个 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;
}

这是一个修改后的 Fiddle，它演示了这个工作。

于 2012-12-04T03:20:38.537 回答