Не удается заставить CSS3 flex работать в Joomla 2.5

Question

Я использую Joomla 2.5.14 и шаблон beez_20 в качестве основы для веб-сайта. Я пытался использовать CSS3 flex на странице, но он, похоже, не работает. Я проверил HTML и CSS код здесь:

<div id="intro_container"> 
    <div class="square"></div><p></p> 
    <div class="square" ></div><p></p> 
</div> 

.square { background-color:red; width: 80px; height: 80px; } 
#intro_container  { width: 250px; height: 150px;border: 1px solid black;background:lightblue;display: flex;flex-direction: row;justify-content: space-around;  flex-wrap: wrap;} 

http://jsfiddle.net/ka01ntk1/4 Но ничего не отображается, когда я поставил код в статью Joomla, как так:

<div id="intro_page"><a href="/index.php/what-to-do-now"><img id="logo_world_green_arrow" src="/templates/beez_20/images/e2tw/logo_world_green_arrow.png" alt="logo_world_green_arrow"   height="125px" width="110px" align="left"  ></a> <div id="intro_text"><p  id="intro_text"><span id="e2tw_title">Introduction</span> <a href="#" class="thai_btn">ไทย</a></p></div> 

Я интересно ли HTML5 и CSS3 работы в шаблоне beez_20. Любая помощь по этому поводу будет высоко оценена.

Answer 1

Часть Css должна быть размещена в конце: /templates/beez_20/css/template.css. Затем добавление кода внутри статьи покажет желаемый результат.

Попробуйте исправить: <div id="intro_text"><p id="intro_text">.

Css не разрешает more than one element with same id in a page. Вы могли бы использовать классы вместо:

<div class="intro_text"><p class="intro_text">.

Удачи!