css - wordpress 中的 Css 网格面临的问题

Question

我希望一切都好，我正在使用 WordPress 我已经为网格编写了一个 HTML 标记，其中在单行中需要显示 2 个图像，但它们是垂直的，每行显示一个图像我想要网格

    <div class="our-specialties Container">
            <h3 class="primary-text"> Pizzas </h3>
            <div class="container-grid">
                <?php
                    $args = array(
                    'post_type' => 'specialties',
                    'post_per_page' => 10,
                    'orderby' => 'title',
                    'order' => 'ASC',
                    'category_name'=> 'pizza' 
                    ) ;
                $pizzas  =  new WP_Query($args);
                while($pizzas->have_posts()): $pizzas->the_post(); ?>

                <div class="columns2-4">
                    <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail('specialties');  ?>
                    <h4><?php the_title(); ?><span><?php the_field('price');?></span> </h4>
                        <?php the_content();  ?>
                    </a>
                </div>
            <?php  endwhile; wp_reset_postdata();   ?>
            </div>
            <h3 class="primary-text"> Others </h3>
            <div class="container-grid">
                <?php
                    $args = array(
                    'post_type' => 'specialties',
                    'post_per_page' => 10,
                    'orderby' => 'title',
                    'order' => 'ASC',
                    'category_name'=> 'other' 
                    ) ;
                $pizzas  =  new WP_Query($args);
                while($pizzas->have_posts()): $pizzas->the_post(); ?>

                <div class="columns2-4">
                    <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail('specialties');  ?>
                    <h4><?php the_title(); ?><span><?php the_field('price');?></span> </h4>
                    <?php the_content();  ?>
                    </a>
                </div>
            <?php  endwhile; wp_reset_postdata();   ?>
            </div>
        </div>

code for the style sheet

@media only screen and (min-width:768px){

        .container-grid{
            margin-left: -10px;
            margin-right: -10px;
        }
        .container-grid::after{
            content:'';
            display: block;
            clear: both;

        }
        [class*='columns']{
            padding: 0 10px;
            float: left;
        }
        .columns2-4{
            width: 50%;
        }


    }

这里的图像在每一行显示单个意味着一个垂直的图像在那里，让我知道我在哪里犯了错误代码看起来很完美，上面的 css 代码在 html 中描述了类，任何技巧都可以解决CSS

我正在创建一个菜单部分，我正在关注一位作者，但他对我有不同的相同代码有不同的结果

Answer 1

像这样将 box-sizing: border-box; 添加到您的列中:

.container-grid {
  margin-left: -10px;
  margin-right: -10px;
}

.container-grid::after {
  content: '';
  display: block;
  clear: both;
}

[class*='columns'] {
  padding: 0 10px;
  float: left;
  box-sizing: border-box;
}

.columns2-4 {
  width: 50%;
}

img {
  max-width: 100%;
}

<div class="our-specialties Container">
  <h3 class="primary-text"> Pizzas </h3>
  <div class="container-grid">
    <div class="columns2-4">
      <a href="#">
        <img src="http://lorempixel.com/200/200/" />
        <h4>title<span>20 $</span> </h4>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </a>
    </div>
    <div class="columns2-4">
      <a href="#">
        <img src="http://lorempixel.com/200/200/" />
        <h4>title<span>20 $</span> </h4>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </a>
    </div>
    <div class="columns2-4">
      <a href="#">
        <img src="http://lorempixel.com/200/200/" />
        <h4>title<span>20 $</span> </h4>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </a>
    </div>
    <div class="columns2-4">
      <a href="#">
        <img src="http://lorempixel.com/200/200/" />
        <h4>title<span>20 $</span> </h4>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </a>
    </div>
  </div>

</div>