0

我有一个使用 css3 列的 3 列 div 的页面。div 内部是可折叠/可扩展的无序列表。其中一些太长了，以至于当它们展开列表项时，它们会换行到下一列。这看起来有点古怪，我想知道somone是否有更好的替代解决方案来显示所有这些看起来更好的数据。有没有办法阻止它进入下一列而只是让那一列自动变高？

这是我页面的链接

http://tinyurl.com/afuswcs

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

    <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 style="-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;"> 
';
//list everything
if ($tax_terms) {
  foreach ($tax_terms  as $tax_term) {
    $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() ) {



 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(); ?></a></li>
        <?php
      endwhile;

      echo'<p></ul>';



    }

    wp_reset_query();
  }echo'</div></div>';
}
?>
4

1 回答 1

0

不要为此使用列。在 PHP 代码中拆分三个元素，并在每个元素周围放置一个 DIV 标签。然后在 DIV 上添加一些样式以将它们浮动到左侧：

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

请记住在最后创建一个 DIV，或者在标签的包装器上使用 clearfix 类：

    <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>';
    }
?>
于 2013-02-26T13:33:25.507 回答