無法讓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">。

祝你好運！