У нас есть страница, которая обычно состоит из двух элементов, расположенных рядом. Несмотря на то, что мы исследуем несколько точек зрения на это, похоже, мы не можем заставить это работать. Мы не прочь использовать 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>





Существует чистое решение 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.
Строгое решение 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. Какой из них выбрать, зависит от личных предпочтений, но это хорошая альтернатива.
Ооо! Я прекратил тестирование IE6. смущенный :)
На самом деле, я только что посмотрел, а last-child взят из CSS2. Он должен работать в IE6. В любом случае, на какой версии IE они сейчас? Может кто-нибудь проверить? Я должен опубликовать это как вопрос о ... о, да.
В IE6 почти нет псевдоклассов! Нам повезло, что мы можем создавать стили наведения для ссылок (вы не можете использовать другие элементы)! Текущая выпущенная версия IE 7 и 8 находится в бета-версии 2, однако все еще довольно много пользователей IE6 отказываются вносить изменения.
Привет, Билл, спасибо за предложение, я думаю, что это тоже неплохой способ ответить на этот вопрос. Что касается совместимости, я думаю, вы обнаружите, что IE6 поддерживает только: link: hover :hibited и: active.
Ах, отличная мысль! Это может быть самое близкое решение с помощью CSS. Мне нравится умное использование псевдоселектора.