通过PHP呈现CSS时不起作用

发布时间：2020-12-13 17:12:57 所属栏目：PHP教程来源：网络整理

导读：我找到了关于如何在容器内平均分隔div的简洁提示： Fluid width with equally spaced DIVs 我尝试使用静态HTML,它工作得很好： div class="category_area"div class="news_box shadow"div class="inside"h2a href="#"Test/a/h2/div/divdiv class="news_box s

我找到了关于如何在容器内平均分隔div的简洁提示：
Fluid width with equally spaced DIVs

我尝试使用静态HTML,它工作得很好：

<div class="category_area">
<div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div>
<div class="news_box shadow"><div class="inside">B</div></div>
<div class="news_box shadow"><div class="inside">C</div></div>
<div class="news_box shadow"><div class="inside">D</div></div>
<span class="stretch"></span></div>

然后我用PHP以编程方式完成了这个：

<?php
echo "<div class='category_area'>";
for ($i=0;$i<4;$i++) {
    echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>";
}
echo "<span class='stretch'></span></div>";

但是,PHP版本不起作用,但是当我通过浏览器查看源时,生成的HTML是相同的.我认为这是因为PHP的呈现方式.

这是我的CSS：

.category_area {
    text-align:justify;
    -ms-text-justify:distribute-all-lines;
    text-justify:distribute-all-lines;
}

.category_area .news_box {
    width:200px;
    height:250px;
    vertical-align:top;
    display:inline-block;
    *display:inline;
    zoom:1;
    background:#fff;
    padding:10px;
}

.category_area .news_box .inside {
    display:block;
}

.stretch {
    width:100%;
    display:inline-block;
    font-size:0;
    line-height:0;
}

.shadow {
    -moz-box-shadow: 3px 3px 4px #999;
   -webkit-box-shadow: 3px 3px 4px #999;
    box-shadow: 3px 3px 4px #999;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#999999')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Color='#999999');
}

以下是通过浏览器查看源代码时的外观(静态)：

<div class="category_area">
<div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div>
<div class="news_box shadow"><div class="inside">B</div></div>
<div class="news_box shadow"><div class="inside">C</div></div>
<div class="news_box shadow"><div class="inside">D</div></div>
<span class="stretch"></span></div>

PHP版本：

<div class='category_area'><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><span class="stretch"></span></div>

有关如何使这项工作的任何提示？

解决方法

您缺少空格(html示例中的换行符) – 这是我个人试图避免任何此类内联块处理方法的原因之一.

添加换行符或空格会为您解决：

for ($i=0;$i<4;$i++) {
    echo "rn<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>";
}

或者,对于更具可读性(imo)的标记：

for ($i=0;$i<4;$i++) { ?>
  <div class="news_box shadow">
    <div class="inside">
      <h2><a href="#">Test</a></h2>
    </div>
  </div>
<?php }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!