通过PHP呈现CSS时不起作用

I found this neat tip on how to equally space divs within a container: Fluid width with equally spaced DIVs

I tried it out using static HTML and it works just fine:

<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>

And then I did this programatically with 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>";

However, the PHP version does not work although when I view the source through the browser the resulting HTML is identical. I am thinking this is because of the way PHP is rendered.

Here's my 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, Direction=135, Color='#999999');
}

Here's how it looks when the source is viewed through the browser (static one):

<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 version:

<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>

Any tips on how to make this work?

dongyan8929
dongyan8929 试图逃避报价,但结果是一样的
大约 8 年之前 回复
dst67283
dst67283 如果您在PHP中使用它们,请确保转义引号!<“\”>
大约 8 年之前 回复
dongya767979565
dongya767979565 乍一看唯一的区别是双引号和单引号,所以我可能会尝试更改PHP版本以输出双引号。除此之外,我唯一的建议是确保它是有效的HTML和CSS。使用无效的HTML,您无法真正期望浏览器正确呈现它。(遗憾的是,如果您使用特定于浏览器的选项,则无效的CSS是不可避免的,但您应确保其余部分有效。)
大约 8 年之前 回复

3个回答

You are missing whitespace (line breaks in your html sample) - which is one of the reasons I personally try to avoid any such inline-block workarounds.

Adding a line break or a space would fix it for you:

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

Or, for somewhat more readable (imo) markup:

for ($i=0;$i<4;$i++) { ?>
  <div class="news_box shadow">
    <div class="inside">
      <h2><a href="#">Test</a></h2>
    </div>
  </div>
<?php }
dpw63348
dpw63348 让我重新说一下; 您的特定流体宽度解决方法依赖于text-align:justify,它会“拉伸”空白以根据需要进行渲染。 与块框不同,内联块框不会丢弃使解决方案可行的空白。 这在规格或MDN中有更好的解释
大约 8 年之前 回复
dsh7623
dsh7623 这有效! 谢谢。 为什么使用内联块需要空格? (对不起CSS新手)
大约 8 年之前 回复

I fooled around with it until I got it to look like the defaulted HTML that you posted, and here's what I got:

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

This seems a bit of hacky , so there might be a better way to do it.

use this one

<?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>';
?>

the problem is in echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>"; line. print extra space solve your problem. like

echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div> ";
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐