【问题标题】: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 &lt;div class="svcta_listing_related_posts_link"&gt; 包裹在li 中并检查
    • 另请查看附件图片
    猜你喜欢
    • 2019-08-07
    • 2015-09-04
    • 1970-01-01
    • 1970-01-01
    • 2014-06-12
    • 1970-01-01
    • 2016-10-24
    • 2011-01-19
    • 2017-09-18
    相关资源
    最近更新 更多