css - 让 UL 移动友好

Question

我正在尝试将相关帖子添加到我的博客 https://reviewyourgear.com

我可以让它在台式机/平板电脑上以我想要的方式显示...但移动设备看起来很糟糕。

我试图在小屏幕上每行一行，在大屏幕上每行 2 行。

知道我做错了什么吗？提前致谢!!!

我正在为我的 UL 使用以下 CSS:

.relatedposts {width: 100%; margin: 5px 1px 1px 1px; float: left; font-size: 15px; background-color: #000000;}
.relatedposts h3 {color :#ffffff; font-size: 20px; margin: 5px 5px 5px 5px; }
.relatedthumb {margin: 0 1px 0 1px; float: left;}
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#ffffff; text-decoration: none; display:block; padding: 1px; width: 150px;}
.relatedthumb a:hover {background-color: #000000; color: #ada771;}
.relatedposts ul {
    margin-top: 10px;
    list-style-type:none;
    display:flex;
    justify-content: center;    
}

@media (max-width: 960px) and (min-width: 501px) {
    .relatedposts li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
@media (max-width: 500px) {
    .relatedposts li { width: 100%; } /* On small screens, show one logo per row */
}

这是我的相关帖子代码(在 Wordpress 的 single.php 中):

<div align="center">        
                <div class="relatedposts">
<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 3, // Number of related posts that will be shown.
'caller_get_posts'=>1
);

$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Reviews and Articles</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>

<div class="relatedthumb">
<li style="list-style: none;"><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
      </div>
</li>
<?
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
                </div></div>

Answer 1

在您的 css 中，您应该将 flex-wrap 添加到列表中。

.relatedposts ul {
    flex-wrap: wrap;
}

W3schools flex 包装 tutorial和 demo .

更多信息，前面问题中的不同方法:

1. > number of items per row using media queries in flexbox
2. > Flexbox - Cater for 2,3 or 1 items per row