html - 在没有 CSS3 的情况下有条件地显示与 Div 元素内联的 Span 元素

Question

我有如下所示的标记:

<span>First Name</span>
<span>Last Name</span>
<div>User Address</div>
<div>User Mobile Number</div>
<span>Edit Link</span>

当标记呈现在页面上时，我希望最后一个跨度(“编辑链接”)与上一个元素内联显示。 “用户手机号码”div 是可选的，它可能存在也可能不存在取决于用户的选择。简而言之:

1) 当<div>User Mobile number</div>存在“编辑链接”应该与它内联。
2)当<div>User Mobile number</div>不存在“编辑链接”应该与 <div>User Address</div> 一致.

预期输出:

案例一:
约翰·米勒
圣锦江街
+1-56565656 |编辑链接

案例二:
约翰·米勒
圣锦江街 |编辑链接

请告诉我如何仅使用 CSS 实现此目的。我们将不胜感激任何帮助
我不能使用 CSS3，因为它在较低版本的 IE 上不受支持

Answer 1

更新的答案:

正如您所说，您的 div User Mobile No在这种情况下可能存在也可能不存在我们可以使用 CSS3 :nth-child倒数第二个div's display属性(property)display:inline-block; .span Edit Link是最后一个元素，所以倒数第二个元素的 display属性应为 display:inline-block确保 span出现在它旁边。

我对您的 HTML 做了一个小改动我只是将你的元素包裹在 div 中container

HTML:

<div id="container">
<span>First Name</span>
<span>Last Name</span>
<br/>

<div>User Address</div>
<div>User Mobile No</div>
<span>Edit Link</span>    
</div>

我还添加了一个 <br/>在 span 之后标记Last Name否则布局将再次困惑。

CSS:

div#container div:nth-last-child(2)
{
display:inline-block;
}

这将选择倒数第二个元素并对其应用样式。

See Working Demo.

希望对你有帮助。