Сделать элемент по центру, когда он один, но выровнен вправо, когда с другим элементом

Question

У нас есть страница, которая обычно имеет два элемента, расположенных рядом. Несмотря на изучение нескольких точек зрения, мы не можем заставить его работать. Мы не против использования JavaScript, просто кажется, что решение на основе CSS должно быть возможным. Есть ли способ использовать только CSS (и, возможно, дополнительную разметку, если необходимо), чтобы сделать element2 центром, когда он появляется сам по себе?

Примеры

Иногда у нас есть два элемента рядом.

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

Но в некоторых условиях на странице есть только element2, например ::1014*

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

Answer 1

Существует чистое css-решение, однако оно не будет работать в версиях IE менее 7, потому что оно не будет понимать селектор брата (+), для этого вы можете рассмотреть решение JavaScript (возможно, Дин Эдвардс) ' 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.

Answer 2

Я думаю, что Фил был на правильном пути, но вы должны попробовать использовать псевдокласс CSS last-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.

Answer 3

это не крутое решение, потому что таблицы больше не "модные", но это решает проблему полностью (под всеми, т.е.)

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

Answer 4

Строгое решение CSS2:

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

Внутренние элементы должны располагаться как встроенный текст внутри #container, но внутри должны оставаться блоками.

Это стандартный CSS, но получение поддержки браузера может занять некоторая хитрость .