Css Jquery可折叠/可扩展div'；s contnet正在包装到3列页面的下一列中

我有一个使用css3列的3列div页面。div内部是可折叠/可扩展的无序列表。其中一些非常长，当它们展开时，列表项会自动换行到下一列中。这看起来有点奇怪，我想知道是否有人有更好的替代方案来显示所有这些数据，这样看起来会更好。有没有办法阻止它进入下一个栏目，让那个栏目自动变得更高

这是我的网页的链接

（还请注意，当在顶部附近的第二列或第三列上单击一个时，它会在展开后跳到上一列）

jQuery（文档）.ready（函数（）{
jQuery（“.wine type list ul”）.hide（）；
//使用类msg_body切换组件网
jQuery（“.税务术语标题”）。单击（函数（）
{
jQuery（this）.next（“.wine type list ul”）.slideToggle（500）；
});
});
h5{光标：手；光标：指针；颜色：#BE883B；字体大小：14pt；填充底部：无；边距底部：无；填充左侧：10%；}
.wine type list ul{display:block；}
.wine类型列表li{宽度：100%；显示：块；左侧填充：10%；}
.按葡萄酒类型划分的酿酒厂{}
按葡萄酒类型列出的葡萄酒厂完整列表：
不要为此使用列。将PHP代码中的元素i拆分为三个，并在每个元素周围放置一个DIV标记。然后在DIV上添加一些样式，使其向左浮动：

    <div style="float:left;width:33.33%";>



请记住在标记的包装器上使用clearfix类的结尾处创建一个DIV：

    <div style="clear:both;"></div>



您的示例已修复：

<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery(".wine-type-list-ul").hide();
        //toggle the componenet with class msg_body
        jQuery(".tax-term-heading").click(function()
        {
            jQuery(this).next(".wine-type-list-ul").slideToggle(500);
        });
    });
</script>
<style>
    h5 {cursor: hand; cursor: pointer; ;color:#BE883B; font-size:14pt; padding-bottom:none; margin-bottom:none;  padding-left:10%;} 
    .wine-type-list-ul{display:block;}
    .wine-type-list-li{width:100%; display:block;padding-left:10%;}
    .winery-by-wine-types {}
</style>
<?php

    $post_type = 'wineries';
    $tax = 'wine-types';
    $tax_terms = get_terms($tax,'hide_empty=0');
            //list the taxonomy


    echo'<div style="clear:both;" class="winery-by-wine-types">';
?>

<p align="center" style="padding-bottom:10px; word-spacing:2px; padding-top:20px; font-size:16pt; color:#BEB585;">Full List of Wineries by Wine Types:</p>

<?php
    echo '<style>.wine-type-list {font-size:11pt;}</style><div><div style="float:left;width:33.33%">';

    //list everything
    if ($tax_terms)
    {
        $totalLength = count($tax_terms);
        $splittedLength = $totalLength / 3;
        $i = 0;
        foreach ($tax_terms  as $tax_term)
        {
            $i++;

            $args=array(
                'post_type' => $post_type,
                "$tax" => $tax_term->slug,
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'caller_get_posts'=> 1,
                'orderby'=>'title' ,
                'order'=>'ASC' 
                );

            $my_query = null;
            $my_query = new WP_Query($args);

            if( $my_query->have_posts() )
            {
                if ($i == $splittedLength)
                {
                    if ($i != 1)
                    {
                        echo '</div>';
                    }

                    if ( $i != $totalLength )
                    {
                        echo '<div style="float:left;width:33.33%">';
                    }
                }

                echo "<h5 class=\"tax-term-heading\" id=\"".$tax_term->slug."\"> $tax_term->name </h5><ul class=\"wine-type-list-ul\">";

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

?>
                <li class="wine-type-list-li"><a class="wine-type-list" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php

                the_title();


                echo'</a></li>';

                endwhile;

                echo'<p></ul>';

                if ($i == $splittedLength)
                {
                    $i = 0;
                }
            }

            wp_reset_query();
        }

        echo'</div></div>';
    }
?>


jQuery（文档）.ready（函数（）{
jQuery（“.wine type list ul”）.hide（）；
//使用类msg_body切换组件网
jQuery（“.税务术语标题”）。单击（函数（）
{
jQuery（this）.next（“.wine type list ul”）.slideToggle（500）；
});
});
h5{光标：手；光标：指针；颜色：#BE883B；字体大小：14pt；填充底部：无；边距底部：无；填充左侧：10%；}
.wine type list ul{display:block；}
.wine类型列表li{宽度：100%；显示：块；左侧填充：10%；}
.按葡萄酒类型划分的酿酒厂{}
按葡萄酒类型列出的葡萄酒厂完整列表：
我可以用php将结果分成三个单独的div吗？所有这些都是通过一个wordpress查询生成的。所以我可以请求无序列表的总数，然后说第一个部分是1/3，第二个部分是1/3，第三个部分是1/3？出于某种原因，它只是将部分结果分成三列。（密码：汤米）对不起，我可以看出我的示例不起作用。我再次更新了示例。现在试试看。很难盲目地编写PHP:）
<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery(".wine-type-list-ul").hide();
        //toggle the componenet with class msg_body
        jQuery(".tax-term-heading").click(function()
        {
            jQuery(this).next(".wine-type-list-ul").slideToggle(500);
        });
    });
</script>
<style>
    h5 {cursor: hand; cursor: pointer; ;color:#BE883B; font-size:14pt; padding-bottom:none; margin-bottom:none;  padding-left:10%;} 
    .wine-type-list-ul{display:block;}
    .wine-type-list-li{width:100%; display:block;padding-left:10%;}
    .winery-by-wine-types {}
</style>
<?php

    $post_type = 'wineries';
    $tax = 'wine-types';
    $tax_terms = get_terms($tax,'hide_empty=0');
            //list the taxonomy


    echo'<div style="clear:both;" class="winery-by-wine-types">';
?>

<p align="center" style="padding-bottom:10px; word-spacing:2px; padding-top:20px; font-size:16pt; color:#BEB585;">Full List of Wineries by Wine Types:</p>

<?php
    echo '<style>.wine-type-list {font-size:11pt;}</style><div><div style="float:left;width:33.33%">';

    //list everything
    if ($tax_terms)
    {
        $totalLength = count($tax_terms);
        $splittedLength = $totalLength / 3;
        $i = 0;
        foreach ($tax_terms  as $tax_term)
        {
            $i++;

            $args=array(
                'post_type' => $post_type,
                "$tax" => $tax_term->slug,
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'caller_get_posts'=> 1,
                'orderby'=>'title' ,
                'order'=>'ASC' 
                );

            $my_query = null;
            $my_query = new WP_Query($args);

            if( $my_query->have_posts() )
            {
                if ($i == $splittedLength)
                {
                    if ($i != 1)
                    {
                        echo '</div>';
                    }

                    if ( $i != $totalLength )
                    {
                        echo '<div style="float:left;width:33.33%">';
                    }
                }

                echo "<h5 class=\"tax-term-heading\" id=\"".$tax_term->slug."\"> $tax_term->name </h5><ul class=\"wine-type-list-ul\">";

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

?>
                <li class="wine-type-list-li"><a class="wine-type-list" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php

                the_title();


                echo'</a></li>';

                endwhile;

                echo'<p></ul>';

                if ($i == $splittedLength)
                {
                    $i = 0;
                }
            }

            wp_reset_query();
        }

        echo'</div></div>';
    }
?>