4

我发现了这个关于如何在容器内 等距分隔 div 的巧妙技巧：Fluid width with equal-spaced DIVs

我使用静态 HTML 进行了尝试，效果很好：

<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 以编程方式做到了这一点：

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

但是，PHP 版本不起作用，尽管当我通过浏览器查看源代码时，生成的 HTML 是相同的。我认为这是因为 PHP 的呈现方式。

这是我的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');
}

以下是通过浏览器查看源代码时的外观（静态）：

<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版本：

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

关于如何完成这项工作的任何提示？

4

3 回答 3

4

您缺少空格（html 示例中的换行符） - 这是我个人尝试避免任何此类inline-block解决方法的原因之一。

添加换行符或空格将为您修复它：

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

或者，为了更具可读性（imo）标记：

for ($i=0;$i<4;$i++) { ?>
  <div class="news_box shadow">
    <div class="inside">
      <h2><a href="#">Test</a></h2>
    </div>
  </div>
<?php }
于 2012-08-12T03:31:14.700 回答
0

我一直在玩弄它，直到我让它看起来像你发布的默认 HTML，这就是我得到的：

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

这似乎有点 hacky ，所以可能有更好的方法来做到这一点。

于 2012-08-12T03:28:36.393 回答
0

用这个

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

问题是echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>";一致的。打印额外空间解决您的问题。像

echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div> ";
于 2012-08-12T04:10:45.290 回答