2

我们有一个页面通常有两个并排排列的元素。尽管为此探索了几个角度，但我们似乎无法让它发挥作用。我们并不反对使用 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>

4

4 回答 4

5

有一个纯 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 之后。

于 2008-11-05T12:19:10.747 回答
2

我认为 Phil 是在正确的轨道上，但你应该尝试使用 CSSlast-child伪类。据我所知，first-child并且last-child是 CSS 中近似if构造的唯一方法。

div#container div#element2:last-child {
    width:100px;
    margin:0 auto;
}

div#element1{
    width:50px;
    float:left;
}

div##element2{
    width:50px;
    float:left;
    margin:0;
}

上面的 CSS 基本上说“如果 element2 是其父元素的最后一个子元素，则使用这组样式，否则使用这些其他样式。

这甚至应该在 IE7 中工作。

于 2008-11-05T23:56:01.650 回答
0

一个严格的 CSS2 解决方案：

#container {
    text-align:center;
}
#element1, #element2 {
    display:inline-block;
}

内部元素应该像#container 内的内联文本一样布局，但在内部保持块。

这是标准 CSS，但获得浏览器支持可能需要一些技巧。

于 2008-11-05T23:32:14.100 回答
0

这不是很酷的解决方案，因为表格不再“时髦”，但它完全解决了问题（总之，ie）

<style>
    #container {
        margin:0 auto;
        width:100px;
    }

    #container table{
        width: 100%;
        text-align:center;
    }

    #element1{ 
        background-color:#0000ff;
    }

    #element2 {
        background-color: #ff0000;
    }
</style>

<div id=container>
    <table cellspacing=0 cellpadding=0>
        <tr>
            <td id="element1">content</td>
            <td id="element2">content</td>
        </tr>
    </table>
</div>
于 2008-11-05T23:41:32.600 回答