与静态HTML相比,PHP生成的代码上的页面样式如何改变 ?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (149)

我目前正在开发一个产品页面,并为这些产品提供动态匹配的div。当用HTML代码进行直接测试时,这些代码都能很好地工作,但是当相同的代码来自PHP脚本时,CSS的样式略有改变,完全破坏了元素的合理性,并将它们打包在一起。该网站仍在建设中,但在这里可以看到不同之处:

  • 静态HTML元素,正常工作:http://200.145.153.175/marcotoledo/anual/produtos/copy.php
    • 使用PHP的页面:http://200.145.153.175/marcotoledo/anual/produtos/index.php

提问于
用户回答回答于

空白很重要.参见:http:/jsfiddle.net/nh82yz5t/

你需要调整php,以便在关闭和打开的连续字符之间插入新的行或空白字符。

也就是说,你想

<div class="cont_produto">
    <!--Stuff -->
</div>
<div class="cont_produto">
    <!-- Stuff -->
</div>

而不是:

<div class="cont_produto">
    <!--Stuff -->
</div><div class="cont_produto">
    <!-- Stuff -->
</div>
用户回答回答于

PHP脚本呈现的HTML很可能添加DOM元素,而不需要换行/空格,这会导致父容器上的“文本对齐”无法工作。

下面是一个使用站点CSS的示例。

.produtos {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  -webkit-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  overflow: auto;
  background-color: white;
  width: 80%;
  margin: 0 auto;
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) , 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cont_produto {
    display: inline-block;
    *display: inline;
    min-width: 120px;
    width: 30%;
    max-width: 300px;
    margin: 0 auto;
        margin-bottom: 0px;
    background-color: rgb(187, 255, 255);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) , 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 20px;

}
<!-- With Line breaks -->

<div class="produtos">
  <div class="cont_produto">
    Some Image
  </div>
  <div class="cont_produto">
    Some Image
  </div>
  <div class="cont_produto">
    Some Image
  </div>
  <div class="cont_produto">
    Some Image
  </div>
</div>

<!-- No line breaks, most likely how your PHP is rendering -->

<div class="produtos"><div class="cont_produto">Some Image</div><div class="cont_produto">Some Image</div><div class="cont_produto">Some Image</div><div class="cont_produto">Some Image</div></div>

扫码关注云+社区

领取腾讯云代金券