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

祝你好运！

无法让CSS3 flex在Joomla 2.5中工作

1 个答案: