0

このページには、css3 列を使用した 3 列の div があります。div 内には、折りたたみ可能/展開可能な順序なしリストがあります。それらのいくつかは非常に長く、展開するとリスト項目が次の列に折り返されます。これはちょっとファンキーに思えます。誰かがこのすべてのデータをより良く表示するためのより良い代替ソリューションを持っているかどうか疑問に思っていました。次の列に入らないようにして、その列が自動的に高くなるようにする方法はありますか?

マイページへのリンクはこちら

http://tinyurl.com/afuswcs

(また、上部近くの 2 番目または 3 番目の列をクリックすると、展開後に前の列にジャンプすることに注意してください)

    <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 コード内の要素を 3 つに分割し、各要素を 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 に答える