0

我有下面的代码将我的 for 每个语句分成两个单独的 div：

<?php
    $previousLetter = false;
?>
<?php 
$i=1; // have a counter variable
foreach($this->clubs as $clubs) : ?>
    <?php
    $firstLetter = substr($clubs->club_name, 0, 1);
    if ($firstLetter != $previousLetter) {
    if($i==1){
        echo "<div class="left_class">"; // open left div
    }
    ?>
        <h3 id="club-link-header"><u><?php echo $firstLetter; ?></u></h3>
    <?php } ?>
        <a id="club-link" href="<?php echo $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $clubs->id));?>"><br />
        <?php echo $this->escape($clubs->club_name);?></a>
    <?php $previousLetter = $firstLetter; ?>
<?php 
    if($i==25){
        echo "</div>"; //close left div
        echo "<div class="right_class">"; // open right div
    }

    if($i==50){
        echo "</div>"; //close right div
    }

$i++; // increment the counter variable for each loop
endforeach; 
?>

的HTML：

<body>
        <div id="top">
            <a id="admin-link" href="/MN/public/index.php/admin/index/id/1"></a>
    <div id="logged-in-as">
        Hello! ric89. <a href="/MN/public/index.php/auth/logout">Logout</a>    </div>

</div>
    <div id="header">
    <div id="header-wrapper">
            <div id="social">
                <a id="fb" href="#"><img src="/MN/public/images/fb.png" /></a>
                <a id="twitter" href="#"><img src="/MN/public/images/twitter.png" /></a>
            </div>
            <div id="nav">
                <div id="nav-left">
                    <a href="/MN/public/index.php/index/index/id/1">Home</a>
                </div>
                <div id="nav-middle">
                    <a id="clubs-link" href="/MN/public/index.php/clubs/index/id/1">Clubs</a>
                    </div>
                <div id="nav-right">
                    <a id="admin-link" href="/MN/public/index.php/admin/index/id/1">Admin</a>
                </div>
            </div>
            <div id="logo">

             </div>

    </div>

</div>
    <div id="content">
        <h1>Clubs</h1>
           //database content is echo'd here, 50 items like this:
           <h3 id="club-link-header"><u>5</u></h3>
        <a id="club-link" href="/MN/public/index.php/club-description/index/id/1/club_id/1"><br />
    5th Avenue</a>
    </div>
<div id="footer">
        <p id="footer-text">created & designed by <a href="http://www.richardgregson.info" target="_blank">Richard Knight-Gregson</a></p>
</div>
</body>

CSS：

/*Content styles */

.clubs-left {
    width: 450px;
}

.clubs-right {
    float: right;
    margin-left: 450px;
    position: absolute;
    width: 450px;
}

.right_class {
    float: right;
    width: 450px;
}

.left_class {
    position: absolute;
    width: 450px;
}

.clear {
    clear: both;
}

这是问题的图片 -> http://imageshack.us/photo/my-images/84/screenshot20120426at211.png/页脚应该是 100% 宽度。

问题是我不能在不破坏布局的情况下向右浮动 div，因为右 div 需要位于代码左侧的顶部，但这样做会破坏 PHP。

有什么建议么？

谢谢

4

3 回答 3

1

由于您描述接缝的问题纯粹是装饰性的，我相信您需要清除浮动以允许文档继续正常呈现：

在你之后<div class="right_class">...</div>：

HTML

<div class="clear"></div>

CSS

.clear {clear: both;}
于 2012-04-26T19:36:11.587 回答
0

这样的事情不会更有效率吗？

按字母分解您的列表以开始...

var glossary=array();
var $half=(int)count($this=>clubs);

 var $count=0;

foreach ($this->clubs as $clubs){
        $glossary[substr($clubs->club_name, 0, 1)][] = $clubs;
    }
    # Start a definition list.  (http://www.w3schools.com/tags/tag_dl.asp)
    echo'<dl>';
    foreach ($glossary as $letter => $clubs){
        $count++;
        $class=($count>=$half)?'float_left':'float_right';
    # list all the clbs broken down by letter
        echo"<dt class='$class'>$letter</dt>";
        foreach ($clubs as $club)
        {

            echo"<dd class='$class'>
                <a id='club-link' href='" . $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $club->id)) . "'>
            " . $this->escape($clubs->club_name) .
                "</a>
            </dd>";
        }
    }
    echo '</dl>';

和CSS：

dl{
   width:100%;
}

.float_left{
   width:49%;
   float:left;
   clear:left;
}
.float_right{
   width:49%;
   float:right;
   clear:right;
}

这样，当你击中球杆的中点后，dt 和 dd 元素在右侧堆叠，无论你有多少球杆，列表都会自动平衡。

于 2012-04-26T20:39:18.707 回答
0

事实证明，页脚位于内容 div 内，而在页脚开始之前，我还没有正确关闭内容 div 就足够了！很抱歉浪费你的时间。。

于 2012-04-27T20:35:06.380 回答