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

У нас есть страница, которая обычно состоит из двух элементов, расположенных рядом. Несмотря на то, что мы исследуем несколько точек зрения на это, похоже, мы не можем заставить это работать. Мы не прочь использовать 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>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
255
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Существует чистое решение 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.

Ах, отличная мысль! Это может быть самое близкое решение с помощью CSS. Мне нравится умное использование псевдоселектора.

Sam Murray-Sutton 05.11.2008 15:28

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

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

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

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

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

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

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

Мой метод должен работать и в IE7, однако оба метода не работают в IE6. Какой из них выбрать, зависит от личных предпочтений, но это хорошая альтернатива.

philnash 06.11.2008 03:08

Ооо! Я прекратил тестирование IE6. смущенный :)

Bill the Lizard 06.11.2008 03:11

На самом деле, я только что посмотрел, а last-child взят из CSS2. Он должен работать в IE6. В любом случае, на какой версии IE они сейчас? Может кто-нибудь проверить? Я должен опубликовать это как вопрос о ... о, да.

Bill the Lizard 06.11.2008 03:13

В IE6 почти нет псевдоклассов! Нам повезло, что мы можем создавать стили наведения для ссылок (вы не можете использовать другие элементы)! Текущая выпущенная версия IE 7 и 8 находится в бета-версии 2, однако все еще довольно много пользователей IE6 отказываются вносить изменения.

philnash 06.11.2008 03:24

Привет, Билл, спасибо за предложение, я думаю, что это тоже неплохой способ ответить на этот вопрос. Что касается совместимости, я думаю, вы обнаружите, что IE6 поддерживает только: link: hover :hibited и: active.

Sam Murray-Sutton 06.11.2008 12:52

Другие вопросы по теме