Question

我目前正在一个产品页面上，该产品页面具有动态适合产品的div。当直接用HTML代码进行测试时，这些代码可以完美地工作，但是当完全相同的代码来自PHP脚本时，CSS样式会稍有变化，从而完全简化了元素的合理性并将它们打包在一起。该站点仍在建设中，但可以在此处看到区别：

静态HTML元素正常工作：https://xebia.com/blog/a-better-way-and-script-to-add-a-service-principal-in-azure-for-vsts/
- 使用PHP的页面：http://200.145.153.175/marcotoledo/anual/produtos/copy.php

Answer 1

空白很重要....请参见：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>

Answer 2

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>

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

2 个答案: