居中网格视图css和不同的窗口大小

Question

我正在尝试使用css为我的网站应用更一致的样式，但我有点迷失，希望你能提供帮助。

当前情况：

• div #post-area包含普通/大窗口上的3列帖子或屏幕大小
• div #post-area居中
• 问题：当您减小窗口的宽度时，即使仍然可以显示3个帖子，它也会过早变为2列视图。

理想情况：

• div #post-area包含普通/大窗口上的3列帖子或屏幕大小
• div #post-area居中
• #post-area的居中位置会随着您减小窗口大小而消失得越来越多，当正好没有足够空间容纳3个帖子时，然后 2个帖子旁边应该显示彼此

这是我的div容器：

  #post-area {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 260px;
    padding-bottom: 4em;
  }

现在，我可以通过删除所有width和margin: auto;标记解决问题，但内容将不再居中！

问题： 如何获得居中的内容，但仍能在较小的窗口尺寸上正确显示？

非常感谢，非常感谢你的帮助。

My Website

编辑我想如果你有我的代码，也许你可以帮助更好，所以：这是我的index.php：

＆＃13;

＆＃13;

<div id="post-area">
<?php while (have_posts()) : the_post(); 	
    
    get_template_part( 'content', get_post_format() );

    
 endwhile; ?>
    
    
</div>

＆＃13;

＆＃13;

＆＃13;

这是我的content.php：

＆＃13;

＆＃13;

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		 
            <div class="gridly-copy">
                
                
         
                
                
                
                  <?php if ( has_post_thumbnail() ) { ?>
       
         
            <?php    $image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id(), 'summary-image' ); // returns an array

?>
         
                
               
                
                 <div class="gridly-image">
                           
                <img class="wpimagehover alignnone wp-image-<?php echo get_post_thumbnail_id() ?>" src="<?php echo $image_attributes[0]; ?>" alt="" width="300" height="250" data-fburl="<?php the_permalink() ?>" data-tweeturl="<?php the_permalink() ?>" data-pinurl="<?php the_permalink() ?>" data-stumbleuponurl="<?php the_permalink() ?>" data-sstyle="circle" data-sharetxt="<?php echo get_the_excerpt(); ?>" data-animation="fade" /> 
                   
                </div>

                
                <div><h2><a href="<?php echo get_post_meta( get_the_ID(), 'afflink', true); ?>" target="_blank"><?php the_title(); ?></a></h2></div>
                           
                
          <!-- <div class="gridly-category"><p><?php the_category(', ') ?></p></div>
            -->
		  <?php } ?>
       			
            <!-- POS TITLE -->
            
             <!--   <p class="gridly-date"><?php the_time(get_option('date_format')); ?> 
            
</p>  -->

<div class="contentbox"> <?php the_content('<span class="moretext">(Mehr lesen...)</span>'); ?> </div>

   <!--Preis Anzeige  -->                 

  <div class="price">
      <?php echo get_post_meta( get_the_ID(), 'preis', true); echo ' ' ?> </div>
                    

          
                    
   <!--Sparschwein killen button  -->                 
  <div class="sparbutton">              
    <?php 
    $linkadress = get_post_meta( get_the_ID(), 'afflink', true);

        echo do_shortcode( '[otw_shortcode_button href="' . $linkadress. '"             size="medium" bgcolor="#d11112"  icon_position="left" shape="radius" target="_blank"]Sparschwein Killen[/otw_shortcode_button]' ) ?> 

</div>

                
                    
                    
        
                    
         </div>
       </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个，我认为此代码可以解决您的问题

 #post-area {
    width: 100%;//modified
    margin:0 auto;//modified
    padding-top: 260px;
    padding-bottom: 4em;
    }

    #post-area .post {
    width: 24%;//modified
    background: #FFF;
    margin-top: 10px;
    position: relative;
    display: inline-block;//added
    }

如果内容合并在一起，请尝试以下代码仅css

 .contentbox {
    margin-top: 4px;
    height: 105px;
    width: 80%;//added width
    }