Question

我有以下代码将我的每个语句分成两个独立的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;
}

这是问题的图像 - ＆gt; http://imageshack.us/photo/my-images/84/screenshot20120426at211.png/页脚宽度应为100％。

问题是我不能在不破坏布局的情况下将div浮动，因为正确的div需要在代码的左上方，但这样做会破坏PHP。

有什么建议吗？

由于

Answer 1

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

在<div class="right_class">...</div>：

之后

<强> HTML

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

<强> CSS

.clear {clear: both;}

Answer 2

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

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

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元素叠加在右侧，无论你有多少个球杆，列表都会自动平衡。

Answer 3

事实证明，页脚位于内容div中，并且在页脚启动之前我还没有正确关闭内容div所需的全部内容！抱歉浪费你的时间..

PHP为每个语句拆分并将一半的数据浮动

3 个答案: