0

for each ステートメントを 2 つの個別の 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 に答える