没有表三列分类布局 [英] No Table Three Column Category Layout

查看：86
本文介绍了没有表三列分类布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在处理一些代码，并且在某个片断上挂了点。希望能找到一些帮助。我正在使用开源的WeBid拍卖脚本，并试图消除布局中使用的一些表格。

I am working with some code and am hung up a bit on a certain piece. Hoping to find some help. I am using the open source WeBid Auction Script, and trying to eliminate some of the tables used in the layout. The following function is the code in question.

if (mysql_num_rows($result) == 0)
{
    // redirect to global categories list
    header ('location: browse.php?id=0');
    exit;
}
else
{
    // Retrieve the translated category name
    $par_id = $category['parent_id'];
    $TPL_categories_string = '';
    $crumbs = $catscontrol->get_bread_crumbs($category['left_id'], $category['right_id']);
    for ($i = 0; $i < count($crumbs); $i++)
    {
        if ($crumbs[$i]['cat_id'] > 0)
        {
            if ($i > 0)
            {
                $TPL_categories_string .= ' &gt; ';
            }
            $TPL_categories_string .= '<a href="' . $system->SETTINGS['siteurl'] . 'browse.php?id=' . $crumbs[$i]['cat_id'] . '">' . $category_names[$crumbs[$i]['cat_id']] . '</a>';
        }
    }

    // get list of subcategories of this category
    $subcat_count = 0;
    $query = "SELECT * FROM " . $DBPrefix . "categories WHERE parent_id = " . $id . " ORDER BY cat_name";
    $result = mysql_query($query);
    $system->check_mysql($result, $query, __LINE__, __FILE__);
    $need_to_continue = 1;
    $cycle = 1;

    $TPL_main_value = '';
    while ($row = mysql_fetch_array($result))
    {
        ++$subcat_count;

        if ($cycle == 1)
        {
            $TPL_main_value .= '<tr align="left">' . "\n";

        }
        $sub_counter = $row['sub_counter'];
        $cat_counter = $row['counter'];
        if ($sub_counter != 0)
        {
            $count_string = ' (' . $sub_counter . ')';
        }
        else
        {
            if ($cat_counter != 0)
            {
                $count_string = ' (' . $cat_counter . ')';
            }
            else
            {
                $count_string = '';
            }
        }
        if ($row['cat_colour'] != '')
        {
            $BG = 'bgcolor=' . $row['cat_colour'];
        }
        else
        {
            $BG = '';
        }
        // Retrieve the translated category name
        $row['cat_name'] = $category_names[$row['cat_id']];
        $catimage = (!empty($row['cat_image'])) ? '<img src="' . $row['cat_image'] . '" border=0>' : '';
        $TPL_main_value .= "\t" . '<td ' . $BG . ' width="33%">' . $catimage . '<a href="' . $system->SETTINGS['siteurl'] . 'browse.php?id=' . $row['cat_id'] . '">' . $row['cat_name'] . $count_string . '</a></td>' . "\n";

        ++$cycle;
        if ($cycle == 4)
        {

            $cycle = 1;
            $TPL_main_value .= '</tr>' . "\n";
        }
    }

    if ($cycle >= 2 && $cycle <= 3)
    {
        while ($cycle < 4)
        {
            $TPL_main_value .= '    <td width="33%">&nbsp;</td>' . "\n";
            ++$cycle;

        }
        $TPL_main_value .= '</tr>' . "\n";
    }

我不希望将其解析为表格，而是将其放入内容区域下面的html：

Instead of parsing into a table, I want it to go into the content areas of the html below:

    <div class="colmask blogstyle4">
       <div class="colmid">
            <div class="colleft">
            <div class="col1">
                <!-- Column 1 start -->
                <!-- Content -->
                <!-- Column 1 end -->
            </div>
            <div class="col2">
                <!-- Column 2 start -->
                <!-- Content -->
                <!-- Column 2 end -->
            </div>
            <div class="col3">
                <!-- Column 3 start -->
                <!-- Content -->
                <!-- Column 3 end -->
            </div>
        </div>
    </div>
</div>

我尝试了几件事，但是我的代码只是重复了一遍。
这是我尝试过的一种方式：

I have tried a few things, but my code just repeats itself. Here is one of the ways I tried:

    // get list of subcategories of this category
    $subcat_count = 0;
    $query = "SELECT * FROM " . $DBPrefix . "categories WHERE parent_id = " . $id . " ORDER BY cat_name";
    $result = mysql_query($query);
    $system->check_mysql($result, $query, __LINE__, __FILE__);
    $need_to_continue = 1;
    $cycle = 1;
    $column = 1;

    $TPL_main_value = '';
    while ($row = mysql_fetch_array($result))
    {
        ++$subcat_count;

        if ($cycle == 1)
        {
            $TPL_main_value .= '<div class="col'.$column.'">' . "\n";

        }
        $sub_counter = $row['sub_counter'];
        $cat_counter = $row['counter'];
        if ($sub_counter != 0)
        {
            $count_string = ' (' . $sub_counter . ')';
        }
        else
        {
            if ($cat_counter != 0)
            {
                $count_string = ' (' . $cat_counter . ')';
            }
            else
            {
                $count_string = '';
            }
        }
        if ($row['cat_colour'] != '')
        {
            $BG = 'bgcolor=' . $row['cat_colour'];
        }
        else
        {
            $BG = '';
        }
        // Retrieve the translated category name
        $row['cat_name'] = $category_names[$row['cat_id']];
        $catimage = (!empty($row['cat_image'])) ? '<img src="' . $row['cat_image'] . '" border=0>' : '';
        $TPL_main_value .= "\t" . '<p>' . $catimage . '<a href="' . $system->SETTINGS['siteurl'] . 'browse.php?id=' . $row['cat_id'] . '">' . $row['cat_name'] . $count_string . '</a></p>' . "\n";

        ++$cycle;
        if ($cycle == 4)
        {

            $cycle = 1;
            $TPL_main_value .= '</dv>' . "\n";
    ++$column;
        }
    }

    if ($cycle >= 2 && $cycle <= 3)
    {

        while ($cycle < 4)
        {
            $TPL_main_value .= '    <p>&nbsp;</p>' . "\n";
            ++$cycle;


        }
        $TPL_main_value .= '</div>
' . "\n";

    }

我得到了：

and I got:

<div class="col1">
    <p><a href="/browse.php?id=2">Art &amp; Antiques</a></p>
    <p><a href="/browse.php?id=198">Automotive (1)</a></p>
    <p><a href="/browse.php?id=29">Books</a></p>
</dv>
<div class="col2">
    <p><a href="/browse.php?id=68">Clothing &amp; Accessories</a></p>
    <p><a href="/browse.php?id=72">Coins &amp; Stamps</a></p>
    <p><a href="/browse.php?id=75">Collectibles</a></p>
</dv>
<div class="col3">
    <p><a href="/browse.php?id=113">Comics, Cards &amp; Science Fiction</a></p>
    <p><a href="/browse.php?id=122">Computers &amp; Software</a></p>
    <p><a href="/browse.php?id=127">Electronics &amp; Photography</a></p>
</dv>
<div class="col4">
    <p><a href="/browse.php?id=133">Home &amp; Garden</a></p>
    <p><a href="/browse.php?id=143">Movies &amp; Video</a></p>
    <p><a href="/browse.php?id=150">Music</a></p>
</dv>
<div class="col5">
    <p><a href="/browse.php?id=157">Office &amp; Business</a></p>
    <p><a href="/browse.php?id=162">Other Goods &amp; Services</a></p>
    <p><a href="/browse.php?id=170">Sports &amp; Recreation</a></p>
</dv>
<div class="col6">
    <p><a href="/browse.php?id=174">Toys &amp; Games</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

这不会起作用，并不是我所追求的。
有人可以帮助我理解我需要做的改变，以完成解析到3列而不是它当前使用的表吗？

which is not going to work and is not what I am after. Could someone help me to understand the changes I need to make to accomplish parsing into the 3 columns instead of the table it uses currently?

推荐答案

我也认为没有理由避免表格，但也许这个简短的例子会让你更近一步。常见的表格看起来像这样。让我们将所有标签更改为div，并留下相应的类。

I also think there's no reason to avoid tables, but maybe this short example will make you a step closer. Common table looks like thi s. Lets change all tags to divs leaving corresponding classes.

<table>                            <div class="table">
    <tr>                               <div class="tr">
        <td>One</td>                       <div class="td">One</div>
        <td>Two</td>                       <div class="td">Two</div>
        <td>Three</td>                     <div class="td">Three</div>
    </tr>                  ==>         </div> 
    <tr>                               <div class="tr">
        <td>1</td>                         <div class="td">1</div>
        <td>2</td>                         <div class="td">2</div>
        <td>3</td>                         <div class="td">3</div>
    </tr>                              </div>
</table>                           </div>

现在我们唯一要做的就是使用css的属性显示

Now the only thing we have to do is to convert them using css's property display

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

就是这样。如果添加更多属性，它将看起来完全相同：
border-spacing：2px; 表格div和 padding：1px; for cell-divs

That's it. If you add a little bit more properties, it will look exactly the same: border-spacing: 2px; for table-div and padding: 1px; for cell-divs

DEMO

DEMO

如果你想让你的例子看起来像：

If you want your example to look like:

+-------+-------+-------+
| .col1 | .col2 | .col3 |
+-------+-------+-------+
| .col4 | .col5 | .col6 |
+-------+-------+-------+

你必须用额外的div来包装每三个div

you have to wrap every three divs with additional div

$TPL_main_value = '<div class="row">';
// instead of $TPL_main_value = '';
// then close it and open again every three loops
if ($i%3==0) $TPL_main_value = '</div><div class="row">';
// and don't forget to close it after while loop ends

也许此代码会帮助你

这篇关于没有表三列分类布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆