Блог

У меня есть следующий макет: вложенные разделы, внешний из которых имеет ширину 100%, а внутренний — некоторую фиксированную ширину. Внутренний формат центрирован с помощью margin:auto .

Теперь мне нужно установить разные фоны для DIVS. Скажем, внутренняя часть должна быть красной, а оставшаяся часть внешней — зеленой. Проблема в том, что фоны должны быть полупрозрачными (с использованием PNG или CSS3 rgba() ). CSS3). Итак, фон внутреннего DIV не выглядит красным, он становится коричневым! Вот мой код:

 <div id="outer">
    <div id="inner"></div>
</div>
  

и CSS

 #outer{width:100%;height:50px;background:rgba(0,255,0,0.5)}
#inner{width:800px;height:50px;margin:auto;background:rgba(255,0,0,0.5)}
  

Я пытался использовать 3 плавающих раздела внутри #outer . Но я не могу установить ширину для двух других разделов, чтобы #inner они находились в центре экрана. width:auto также не работает.

Я знаю, что такой макет возможен с таблицами; точнее, с элементами, которые имеют display:table-cell . Итак, когда я добавляю еще один «внешний» DIV, я получаю нужный мне результат (для табличного макета требуются 3 «уровня»: таблица, строка, ячейка). CSS:

 #outer2{display:table;width:100%}
#outer{height:50px;display:table-row}
#inner{width:800px;height:50px;background:rgba(255,0,0,0.5)}
#left, #right, #inner{display:table-cell}
#left, #right {background:rgba(0,255,0,0.5)}
  

и уродливый HTML:

 <div id="outer2">
    <div id="outer">
        <div id="left"></div>
        <div id="inner"></div>
        <div id="right"></div>
    </div>
</div>
  

Есть ли какой-либо другой способ поместить 3 DIV в ряд с таким «балансом»? Или, может быть, есть совершенно другой способ решить исходную проблему? Я имею в виду, проблема возникла только из-за прозрачности! 🙂

Мне не нравится решение с display:table , потому что я добавил 3 дополнительных DIV… Также, пожалуйста, не предлагайте никаких решений с использованием JS.

Если вы чувствуете раздражение и не возражаете потерять горизонтальную полосу прокрутки…

HTML

 <section></section>
  

CSS

 body { overflow-x:hidden; }
section {
    width:500px;
    height:50px;
    margin:0 auto;
    position:relative;
    background:rgba(255,0,0,0.5);
}
section:before, section:after {
    top:0;
    bottom:0;
    content:"";
    width:9999px;
    position:absolute;
    background:rgba(0,255,0,0.5);
}
section:after { left: 100%; }
section:before { right: 100%; }
  

Демонстрация:http://jsfiddle.net/6STug

Подсказка, CSS-хитрости

Почему вы не используете одно фоновое изображение png на #outer? Изображение может содержать полупрозрачный красный, затем полупрозрачный зеленый и снова полупрозрачный красный.