混淆了 UL 和 Flex CSS，2 行，2 列，共 4 项答案

【问题标题】：Confused with UL & Flex CSS, 2 Rowws, 2 Columns, total 4 Items混淆了 UL 和 Flex CSS，2 行，2 列，共 4 项
【发布时间】：2019-03-28 10:03:05
【问题描述】：

我正在尝试将我的 WordPress 帖子样式设置为 2 宽和 2 行。

我创造了科学怪人！

我怎样才能让它像这个图像。

Click me for Dev Website

PHP/HTML

    <ul class="svcta_listing_related_posts_ul">
    <li class="svcta_listing_related_posts_li">
        <?php foreach( $posts as $post): ?>
        <?php setup_postdata($post); ?>
        <?php the_post_thumbnail('listing_post_thumbnail'); ?> 
            <div class="svcta_listing_related_posts_link"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
    </li>
        <?php endforeach; ?>
</ul>

CSS

.svcta_listing_related_posts_ul {
  list-style: none;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.svcta_listing_related_posts_li {
margin-right: 75px;
}

【问题讨论】：

标签： html css wordpress flexbox related-posts

【解决方案1】：

<ul class="svcta_listing_related_posts_ul">
  <?php foreach( $posts as $post): ?>
    <li class="svcta_listing_related_posts_li">
      <?php
        setup_postdata($post);
        the_post_thumbnail('listing_post_thumbnail');
      ?> 
      <a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>
      </a>
    </li>
  <?php endforeach; ?>
</ul>

.svcta_listing_related_posts_ul {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin: -75px 0 0 0;
}
.svcta_listing_related_posts_li {
  flex-basis: calc(50% - 37.5px);
  padding: 75px 0 0 0;
}

我会避免把div放在li里面

编辑

如果你现在想在同一行显示 4 张图片，那会有点不同，这里是完整的代码

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style>
    .svcta_listing_related_posts_ul,
    .svcta_listing_related_posts_ul * {
      box-sizing: border-box;
    }
    .svcta_listing_related_posts_ul {
      list-style-type: none;
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      margin: -10px 0 0 10px;
    }
    .svcta_listing_related_posts_li {
      flex-basis: 25%;
      max-width: 250px;
      padding: 10px 0 0 10px;
    }

    .svcta_listing_related_posts_li img {
      max-width: 100%;
    }

    .svcta_listing_related_posts_li a,
    .svcta_listing_related_posts_li img {
      display: block;
    }

    @media screen and (max-width: 1024px) {
      .svcta_listing_related_posts_li {
        flex-basis: 50%;
        max-width: none;
      }
    }

    @media screen and (max-width: 768px) {
      .svcta_listing_related_posts_li {
        flex-basis: 100%;
        text-align: center;
      }
      .svcta_listing_related_posts_li img {
        margin: auto;
      }
    }
  </style>
</head>
<body>
  <ul class="svcta_listing_related_posts_ul">
    <li class="svcta_listing_related_posts_li">
      <img src="http://svcta.lainternet.biz/wp-content/uploads/2016/09/hotel_room_wedding_romance-200x200.jpg" class="attachment-listing_post_thumbnail size-listing_post_thumbnail wp-post-image" alt="Hotel Room Wedding Romance" width="200" height="200"> 
      <a href="http://svcta.lainternet.biz/3-rehearsal-dinner-ideas-in-simi-valley/">
        3 Rehearsal Dinner Ideas in Simi Valley      </a>
    </li>
    <li class="svcta_listing_related_posts_li">
      <img src="http://svcta.lainternet.biz/wp-content/uploads/2016/09/hotel_room_wedding_romance-200x200.jpg" class="attachment-listing_post_thumbnail size-listing_post_thumbnail wp-post-image" alt="Hotel Room Wedding Romance" width="200" height="200"> 
      <a href="http://svcta.lainternet.biz/3-things-you-need-to-know-before-booking-your-room/">
        3 Things you Need to Know Before Booking Your Room      </a>
    </li>
    <li class="svcta_listing_related_posts_li">
      <img src="http://svcta.lainternet.biz/wp-content/uploads/2018/10/Wood_Ranch_Feature_500x360-200x200.jpg" class="attachment-listing_post_thumbnail size-listing_post_thumbnail wp-post-image" alt="Wood Ranch Feature 500x360" width="200" height="200"> 
      <a href="http://svcta.lainternet.biz/stay-in-simi-valley-spend-the-day-outdoors/">
      Stay In Simi Valley &amp; Spend The Day Outdoors      </a>
    </li>
    <li class="svcta_listing_related_posts_li">
      <img src="http://svcta.lainternet.biz/wp-content/uploads/2018/10/Gallery_Bestwestern_Wedding_500x400-200x200.jpg" class="attachment-listing_post_thumbnail size-listing_post_thumbnail wp-post-image" alt="Gallery Bestwestern Wedding 500x400" width="200" height="200"> 
      <a href="http://svcta.lainternet.biz/stay-in-simi-wedding-guide/">
        Stay in Simi Wedding Guide      </a>
    </li>
</ul>
</body>
</html>

将其保存为 .html 文件以查看其工作原理。我没有把它放在 sn-p 上，因为你必须通过调整它的大小来查看结果。

【讨论】：

再次感谢您的帮助。我做了一个小改动，现在需要做 4 宽。我仍然需要它在移动设备上包装，所以我认为代码集将相同或相似。
我现在正在使用
.svcta_listing_related_posts_ul { 填充：10px;显示：弯曲；弹性包装：换行；对齐项目：弹性开始； justify-content: 之间的空格；边距：-75px 0 0 0；列表样式：无； } .svcta_listing_related_posts_li { 弹性基础：计算（50% - 37.5px）；填充：75px 0 0 0； }
我在下面发布代码，我正在努力在 cmets 中格式化它。
我在图片底部的 EDIT 标题下更新了我的答案。 Here如何格式化cmets

【解决方案2】：

您可以使用 CSS 网格来做到这一点。检查下面的代码sn-p

.svcta_listing_related_posts_ul {
  list-style: none;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  display: grid;
  grid-template-columns: auto auto;
}

.svcta_listing_related_posts_li {
  margin-right: 75px;
}

<ul class="svcta_listing_related_posts_ul">
  <li class="svcta_listing_related_posts_li">
    <?php foreach( $posts as $post): ?>
    <?php setup_postdata($post); ?>
    <?php the_post_thumbnail('listing_post_thumbnail'); ?>
    <div class="svcta_listing_related_posts_link">
      <a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>test
      </a>
    </div>
  </li>
 <li class="svcta_listing_related_posts_li">
    <?php foreach( $posts as $post): ?>
    <?php setup_postdata($post); ?>
    <?php the_post_thumbnail('listing_post_thumbnail'); ?>
    <div class="svcta_listing_related_posts_link">
      <a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>test
      </a>
    </div>
  </li>
 <li class="svcta_listing_related_posts_li">
    <?php foreach( $posts as $post): ?>
    <?php setup_postdata($post); ?>
    <?php the_post_thumbnail('listing_post_thumbnail'); ?>
    <div class="svcta_listing_related_posts_link">
      <a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>test
      </a>
    </div>
  </li>
 <li class="svcta_listing_related_posts_li">
    <?php foreach( $posts as $post): ?>
    <?php setup_postdata($post); ?>
    <?php the_post_thumbnail('listing_post_thumbnail'); ?>
    <div class="svcta_listing_related_posts_link">
      <a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>test
      </a>
    </div>
  </li>

  <?php endforeach; ?>
</ul>

下面突出显示的部分应该用 li 包裹起来

【讨论】：

我将评论移至答案，因为我不知道如何将代码格式化为代码框。
请将img 和div <div class="svcta_listing_related_posts_link"> 包裹在li 中并检查
另请查看附件图片