Question

我正在使用一些代码并且在某个部分挂了一点。希望能找到一些帮助。我正在使用开源WeBid拍卖脚本，并试图消除布局中使用的一些表。以下函数是相关代码。

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的内容区域，而不是解析成表格。

    <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>

我尝试了一些东西，但我的代码只是重复了一遍。这是我尝试的方法之一：

    // 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";

    }

我得到了：

<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列而不是它当前使用的表吗？

Answer 1

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

<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的属性display转换它们

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

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

<强> DEMO

如果您希望您的示例如下所示：

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

你必须用额外的div包装每三个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

也许this code会帮助你

没有表三列类别布局

1 个答案: