Flexbox列已翻译的项目

问题描述

我正在创建一个11项的div，由2列划分。 因此，结果是第一排2个元素的位置正确， 最后一个项目的位置正确。但是中间的项目移到左侧。 我已经使用flexbox很长时间了，但是我的代码看不到任何问题。

我的html代码：

typeid

<div class="postview">

<?php while ($_posts->have_posts()): $_posts->the_post();?>

<h1><a class="post-link" href="<?php the_permalink(); ?>"></h1>
   <div class="posts-layout">
       <h1><?php the_title(); ?></h1>
       <img src="<?php the_post_thumbnail_url('post-picture'); ?>" alt="">
   </div>  
 </a>  
</div>

解决方法

首先，答案。

您的问题不是flexbox。您的问题是HTML嵌套。 您不应该做这样的事情：

<h1><a href="|"></h1> ... </a>

这是问题的根源。

您应该有这样的东西：

<div class="posts-layout">
  <a class="post-link" href="|">
    <h1>Lorem</h1>
    <img src="https://picsum.photos/200/200" alt="random image">
  </a>  
</div>

第二，请阅读以下内容： Feedback requested: Runnable code snippets in questions and answers。

与现在相比，这将带来更好的StackOverflow体验。

第三，如果您不知道如何向代码中添加随机图像，请熟悉https://picsum.photos/。

第四，请使用VScode或类似的代码。它很可能会突出显示所有类型的盲注。

PS没有难过的感觉，所有这些只是一件微不足道的事情。希望您在删除问题之前有时间阅读此内容。

PPS 另外，https://www.grammarly.com/对您有用。