与静态HTML相比，PHP生成的代码的页面样式发生了变化
与静态HTML相比，PHP生成的代码的页面样式发生了变化
提问于 2018-08-02 07:46:19
我目前在一个产品页面上工作，为产品动态拟合div。当直接使用HTML代码测试时，这些方法工作得很好，但是当完全相同的代码来自PHP脚本时，CSS样式略有变化，完全破坏了元素的对齐方式，并将它们打包在一起。该网站仍在建设中，但差异可以在这里看到：
- 静态HTML元素，正常工作:使用PHP的http://200.145.153.175/marcotoledo/anual/produtos/copy.php
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-02 08:15:59
空白很重要...请参阅：http://jsfiddle.net/nh82yz5t/
您需要调整您的php，以便在结束和开始cont_produto div标记之间插入一个新行或空白字符。
也就是说，你想要
<div class="cont_produto">
<!--Stuff -->
</div>
<div class="cont_produto">
<!-- Stuff -->
</div>不是
<div class="cont_produto">
<!--Stuff -->
</div><div class="cont_produto">
<!-- Stuff -->
</div>Stack Overflow用户
发布于 2018-08-02 08:19:23
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51643702
复制相关文章
相似问题
腾讯云开发者
