首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >与静态HTML相比,PHP生成的代码的页面样式发生了变化

与静态HTML相比,PHP生成的代码的页面样式发生了变化
EN

Stack Overflow用户
提问于 2018-08-02 07:46:19
回答 2查看 44关注 0票数 -1

我目前在一个产品页面上工作,为产品动态拟合div。当直接使用HTML代码测试时,这些方法工作得很好,但是当完全相同的代码来自PHP脚本时,CSS样式略有变化,完全破坏了元素的对齐方式,并将它们打包在一起。该网站仍在建设中,但差异可以在这里看到:

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-02 08:15:59

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

您需要调整您的php,以便在结束和开始cont_produto div标记之间插入一个新行或空白字符。

也就是说,你想要

代码语言:javascript
复制
<div class="cont_produto">
    <!--Stuff -->
</div>
<div class="cont_produto">
    <!-- Stuff -->
</div>

不是

代码语言:javascript
复制
<div class="cont_produto">
    <!--Stuff -->
</div><div class="cont_produto">
    <!-- Stuff -->
</div>
票数 0
EN

Stack Overflow用户

发布于 2018-08-02 08:19:23

PHP脚本呈现的HTML很可能添加了没有换行符/空格的DOM元素,这会导致父容器上的“文本对齐”不起作用。

这里是一个使用你的站点CSS的例子。

代码语言:javascript
复制
.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;

}
代码语言:javascript
复制
<!-- 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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51643702

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档