html - 使一个元素在单独时居中，但在与另一个元素一起时向右对齐

Question

我们有一个页面，通常有两个并排排列的元素。尽管为此探索了几个 Angular ，我们似乎无法让它发挥作用。我们并不反对使用 JavaScript，只是觉得基于 CSS 的解决方案应该是可行的。有没有一种方法可以仅使用 CSS(必要时还可以使用额外的标记)使 element2 单独出现时居中？

例子

有时我们有两个并排的元素。

<div id="container">
  <div id="element1">content</div>
  <div id="element2">content</div>
</div>

但在某些情况下，页面上只有 element2 例如:

<div id="container">
  <div id="element2">content</div>
</div>

Answer 1

有一个纯 css 解决方案，但是它在 IE 7 以下的版本中不起作用，因为它无法理解同级选择器 (+)，为此您可能需要考虑一个 JavaScript 解决方案(也许是 Dean Edwards ' IE7 )。无论如何，一些示例 css:

div#element2{
  width:100px;
  margin:0 auto;
}
div#element1{
  width:50px;
  float:left;
}
div#element1 + div#element2{
  width:50px;
  float:left;
  margin:0;
}

关键是 div#element1 + div#element2 这行选择了 div#element2，因为它直接跟在 div#element1 之后。