Question

我正在使用wordpress来构建我的网站，我有一个部分，其中包含一个显示为网格的div项。除了网格只有1个项目的情况外，一切正常。我希望这1个项目到以div为中心，整个div都要响应这是我的代码：

echo '<section class="our-team" id="resources">';


                echo '<div class="container">';


                    echo '<div class="section-header">';


                        $zerif_events_title = get_theme_mod('zerif_events_title',__('Resources','zerif-lite'));//Title

                        if( !empty($zerif_events_title) ):
                            echo '<h2 class="dark-text">'.__($zerif_events_title,'zerif-lite').'</h2>';
                        endif;

                    echo '</div>';


                    if(is_active_sidebar( 'sidebar-doctors' )):
                        echo '<div class="row" data-scrollreveal="enter left after 0s over 0.1s">';
                            dynamic_sidebar( 'sidebar-doctors' );
                        echo '</div> ';
                    else:

                    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                    $wp_query = new WP_Query( array('post_type' => 'resources', 'showposts' => '3', 'paged' => $paged) );
                    $count = $wp_query->post_count;

                    if( $wp_query->have_posts() ):
                     $i =1;
                        while ($wp_query->have_posts()) : $wp_query->the_post();

                         $url = get_post_meta($post->ID, '_location', true);
                         $permalink = get_permalink( $post->ID);

                         if($count == 1)
                         {
                         //
                         echo '<div  style="position:relative;left:33%">';
                         }
                         if($count == 2)
                         {

                         echo "<div class = 'col-md-6'>";
                         }
                         else
                         {
                         echo "<div class='col-md-4'>";
                         }
                            if($url)
                            {
                            echo "<a href = ".$url.">";
                            echo the_post_thumbnail();
                            echo "</a>";
                            echo "<h6>";
                            echo the_title();
                            echo "</h6>";
                            echo substr(get_the_excerpt(), 0,170);  



                            }
                            else{
                            echo "<a href = ".$permalink.">";
                            echo the_post_thumbnail();
                            echo "</a>";
                            echo "<h6>";
                            echo the_title();
                            echo "</h6>";
                            echo substr(get_the_excerpt(), 0,170);  

                            }
                            echo "</div>";  
                             $i++;
                                if($i>3)
                                {
                                    echo "<br>";
                                    $i=1;
                                }

                        endwhile;
                        if($count > 2){
                        $page = get_permalink(  get_page_template_by_title( 'Resources' ) );
                            echo '<a style ="position:relative;top:50px" text-align="right" href = "http://localhost/wordpress/?page_id=89"> View All -> </a>';
                            }
                    endif;


                    endif;




                echo '</div>';


            echo '</section>';

Answer 1

要使元素响应，您需要查看CSS和HTML，而不是PHP。

例如，如果您的ar.each_with_object(Hash.new(0)){|(k,v),obj| obj[k] += v}.sort_by{|_,v| -v} #=>[["lorem", 25], ["ipsum", 20], ["dolor", 15]]具有类DIV（responsive），并且您希望它居中并且具有相对于窗口的自适应宽度，那么您的CSS可以是：

<div class="responsive">foo</div>

这意味着宽度始终恰好是窗口宽度的100％，并且其中的文本将居中。

See W3Schools' Responsive guide for more information.

如何使div响应

1 个答案: