Question

我有一系列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;
}

我知道有很多类似的主题，但我找不到解决方案，除了使用表格。我需要吗？

Answer 1

我希望这个答案不会太仓促，我可能会遗漏某些内容，但在我看来，您可以将.cvyear和.cvtext设置为display: table-cell而不使用实际的表。这样可以像对待表格一样处理你的跨度。

这是我的fiddle。

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

这是你要找的吗？

Answer 2

将您的CSS更改为以下内容：

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

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

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

Here是一个经过修改的小提琴，可以证明这一点。

div绝对定位<span>覆盖下一个<div> </div> </span>

2 个答案: