显示：表格单元格绝对定位查询

I am building a drop-down menu for wordpress, and i've come across an interesting dilemna. Initialy i had a drop down when you hovered "shop" that would display all categories, and from their highlighting categories would bring up 5 random products in a div underneath that would span the whole width of the menu bar. This worked fine

我正在为wordpress构建一个下拉菜单,我遇到了一个有趣的困境。最初,当你徘徊显示所有类别的“商店”时,我有一个下拉菜单,从突出显示的类别中,会在下面的div中显示5个随机产品,这些产品将跨越菜单栏的整个宽度。这很好用

However, the client at the time decided he needed much more categories than what were there, and aptly i had to break them down into subcategories.

然而,当时的客户认为他需要的分类比那里的要多得多,而且我不得不将它们分解为子类别。

The menu currently works like this:

菜单目前的工作方式如下:

Hover shop -> show main categories Hover categories -> show sub-categories.

悬停店 - >显示主要类别悬停类别 - >显示子类别。

This part works absolutely fine; however the list to show the subcategories is laid out using css table settings in order to keep the sub-categories list spread evenly across the size of the menu. You can see an example of what i mean here.

这部分工作绝对正常;但是,显示子类别的列表使用css表设置进行布局,以便使子类别列表在菜单大小上均匀分布。你可以看到我在这里的意思的一个例子。

Previously, i didn't use the css table settings, as the menu fit just fine. The drop down div that contained the categories products worked just fine. Now that they are within the css table markup though, even though they are not defined as being so, seem to be "pretending" to be table-cells. Every drop down of the products is being placed to the right of each subcategory as a blank space. But because they are set to spread evenly, it makes it look very odd.

以前,我没有使用css表设置,因为菜单适合。包含类别产品的下拉div工作得很好。现在它们都在css表标记内,即使它们没有被定义为如此,似乎“假装”成为表格单元格。产品的每个下拉列表都放在每个子类别的右侧作为空白区域。但因为它们被均匀分布,所以看起来很奇怪。

So i have two questions: Firstly; despite displaying absolutely, the drop down products section is -not- going where i need it to go. Is there a way to break these out of the table layout?

所以我有两个问题:第一;尽管显示绝对,下拉产品部分 - 不 - 我需要去的地方。有没有办法打破桌面布局?

Secondly, if not, what other options do i have to make these categories display evenly across the parent div no matter how many subcategories i have? An option i considered was working out the width percentage needed using javascript and then applying that straight to the li's, however i'm not sure how viable that is.

其次,如果没有,我还有什么其他选项可以使这些类别在父div中均匀显示,无论我有多少个子类别?我考虑的一个选项是使用javascript计算出所需的宽度百分比,然后将其直接应用于li,但是我不确定它是多么可行。

$args = array(

     'taxonomy'     => $taxonomy,
     'orderby'      => $orderby,
     'show_count'   => $show_count,
     'pad_counts'   => $pad_counts,
     'hierarchical' => $hierarchical,
     'title_li'     => $title,
     'hide_empty'   => $empty
);
$all_categories = get_categories( $args );
$categorycounter == 0;
foreach ($all_categories as $cat) {
if($cat->category_parent == 0) {
    $categorycounter = $categorycounter + 1;
    $categorypadding = "";
    $category_id = $cat->term_id;       
    echo $categorypadding . '<li class="category-' . $categorycounter.  '"><a class="main-nav-link" href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'</a><div class="drop-down-'. $cat->name .'"><section class="drop-down-section"><section class="sub-list">';
// set up subcategories to display below main categories

              $IDbyNAME = get_term_by('name', $cat->name, 'product_cat');

              $product_cat_ID = $IDbyNAME->term_id;
                    $args4 = array(
                   'hierarchical' => 1,
                   'show_option_none' => '',
                   'hide_empty' => 0,
                   'parent' => $product_cat_ID,
                   'taxonomy' => 'product_cat',     
                    'posts_per_page' => -1
              );            

            $subcategoryloop = get_categories( $args4 );        
            $subcount = 0;
            foreach ($subcategoryloop as $sc){
            if($subcategoryloop){
                $subcount = $subcount + 1;
            $link = get_term_link( $sc->slug, $sc->taxonomy);
            echo '<a class="subme" href="' . $link . '">'. $sc->name .'</a><section class="drop-down-products">';


                                //set up subcategories to display products   

                                        $args2 = array(
                                        'posts_per_page' => -1,
                                        'product_cat' => $sc->slug,
                                        'post_type'=>'product',
                                         'orderby' => 'rand'
                                  );    

                                $productcount = 0;
                                $loop = new WP_Query( $args2 );

                                while ( $loop->have_posts() ) : $loop->the_post();

                                            $productcount = $productcount + 1;
                                            if($productcount < 6){
                                            echo "<section class='thumbcontainer'><p><a href='";
                                            the_permalink();
                                            echo "'>" ;
                                            the_title();
                                            $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
                                                echo "</a></p><img src='" . $feat_image . "'/><br/><p class='dropdown-price'>";
                                                $price = get_post_meta( get_the_ID(), '_regular_price', true);
                                                echo "&pound;" .$price;
                                                echo "</p></section>";



                                            }
                                endwhile;

            echo "<section><a class='view-more' href='". get_term_link($cat->slug, 'product_cat') ."'>View More Products</a></section></section>";


            }
            }
echo "</section></section></div></li>";

 }
 }

As a side note, i know my code is messy. Sorry!

作为旁注,我知道我的代码很乱。抱歉!

1 个解决方案

#1

To justify the list, add:

要证明列表的合理性,请添加:

.sub-list {
  display: table;
  table-layout: fixed;
}

.subme {
  width: 100%;
}