【问题标题】:PHP split for each statement and float half of the data rightPHP 为每个语句拆分并向右浮动一半数据
【发布时间】:2012-04-28 04:35:06
【问题描述】:

我有下面的代码将我的 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。

有什么建议吗?

谢谢

【问题讨论】:

  • 只是为了确定,该代码是否有效或给您一个 Parse 错误?例如:回声“
    ”;
  • 不,那不会出现..
  • 而不是回显所有内容,而是将数据存储到变量中并在 foreach 结束时回显一次。这样处理你的 div 问题会更容易。
  • 绝对定位div而不是浮动它们怎么样?
  • 仅此代码似乎破坏了页面的页脚..如果我绝对定位它们,我会在页眉中获得页脚..

标签: php css


【解决方案1】:

由于您将接缝描述为纯粹是装饰性的问题,我认为您需要清除浮动以允许文档继续正常呈现:

在你的&lt;div class="right_class"&gt;...&lt;/div&gt;之后:

HTML

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

CSS

.clear {clear: both;}

【讨论】:

  • 很难猜出发生了什么,因为您正在请求格式问题的帮助,并且您正在提供一个 PHP 循环作为源代码!您有链接供我们查看吗?或者至少编辑您的问题并放置与该 PHP 一起使用的 CSS 和周围的 HTML。
  • 添加了我认为相关的 HTML 和 CSS。
  • 查看此链接是否是您想要的:jsfiddle.net/UvSSV/1(拖动预览面板可以更好地查看)
  • 是的,我已经做到了这一点。但是我的页脚宽度被破坏了。它曾经是 100%,现在它似乎是两个 div 的总宽度。900px 是一张图片向您展示-> img444.imageshack.us/img444/1343/screenshot20120427at211.png 它显然在我的代码中还有其他内容,但是您知道是什么导致了这些综合错误吗?
  • 如果你想要你的页脚与屏幕的宽度一样,只需对其应用一些 CSS:footer {width:100%;} 如果你的代码与我的 Fiddle 示例非常相似,它就可以了!
【解决方案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 元素会在右侧堆叠,无论你有多少球杆,列表都会自动平衡。

【讨论】:

  • 另外,我不确定在编号序列上打破左/右会特别有用,因为这将仅在给定的已知分辨率下强制以预期方式进行渲染。假设我有一台平板电脑,它在横向放置时看起来不错。当我将平板电脑倾斜到纵向时会发生什么?
  • 我要拆分的信息最多为 12 个字符宽,所以我认为这不是问题。目前看起来很愚蠢,因为有很多空白。 .
【解决方案3】:

原来页脚在内容 div 内,而在页脚开始之前,我还没有正确关闭内容 div 就足够了!很抱歉浪费您的时间..

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签