Question

我有4篇文章，我不能把它放在块中（在section，div或其他），因为它们是由PHP代码生成的（我正在开发一个WordPress模板，这些文章是管理员为特定类别编写的帖子）。我希望显示这些文章like this，即每列两篇文章，无论它们的高度如何。

因此，我无法将它们包装成块，我使用了多列布局属性：

＆＃13;

#main_contact {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

＆＃13;

<?php get_header(); ?>

<div id="wrapper">
    <main id="main_contact">
<!--
Id catégorie Contact : 6
Id catégorie Communication parentale : 4
Id catégorie Art-thérapie : 5
Id catégorie Accueil : 3
Id catégorie Non classé : 1
-->
      <?php
      global $post;
      $args = array( 'numberposts' => 999, 'category' => 6, 'orderby' => 'post_date', 'order' => 'ASC',);
      $myposts = get_posts( $args );
      foreach( $myposts as $post ) :                                     setup_postdata($post); 
      ?>
      <article id="id<?php the_id()?>">
        <div class="contenu">
          <h2>
          <?php the_title(); ?></h2>
          <!--Génère une balise img avec alt prenant nom de l'image-->
          <?php the_post_thumbnail('medium');?>
          <p><?php the_id()?></p>
          <p><?php the_content(); ?></p>
        </div>
      </article>
      <?php endforeach; ?>
            
	</main><!-- .site-main -->
</div><!--wrapper-->
<?php get_footer(); ?>

＆＃13;

但这是结果：

应该位于第一列末尾的第二篇文章的底部位于第二列的顶部（因为前两篇文章的高度高于另外两篇文章的高度）。

如何管理这两列的高度（知道column-height属性不存在）以显示每列的两篇文章？

也许解决办法是将较高的一对文章的高度应用于两列但是如何？

我尝试使用flexbox拉伸属性，但它不起作用;也许我误用了它。

Answer 1

我认为你需要的是将文章显示选项设置为内联块： http://codepen.io/anon/pen/RoaYxz

<style>
    #main_contact {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

    article {
      width: 100%;
      display: inline-block;
      box-sizing: border-box;
      border: 1px solid black;
      margin-bottom: 10px;
    }
</style>
<div id="wrapper">
    <main id="main_contact">
      <article id="id1">
        <div class="contenu">
          <h2>
         title 1</h2>
          <!--Génère une balise img avec alt prenant nom de l'image-->

          <p>1eeee111111111</p>
          <p>1eee2232323</p>
        </div>
      </article>
      <article id="id2">
        <div class="contenu">
          <h2>
         title 2</h2>
          <!--Génère une balise img avec alt prenant nom de l'image-->

          <p>22222</p>
        </div>
      </article>
      <article id="id3">
        <div class="contenu">
          <h2>
         title 3</h2>
          <!--Génère une balise img avec alt prenant nom de l'image-->

          <p>333333</p>
        </div>
      </article>
      <article id="id4">
        <div class="contenu">
          <h2>
         title 4</h2>
          <!--Génère une balise img avec alt prenant nom de l'image-->

          <p>44444444444</p>
        </div>
      </article>
    </main><!-- .site-main -->
</div><!--wrapper-->

Answer 2

我希望这对你有所帮助。

.maincontainer {
  display: flex;
  flex-wrap: wrap;
  max-height: 150vh;
  max-width: 250vw;
}
.row {
  display: flex;
  flex-direction: column;
  margin: 10px;
}
.item {
  border: 1px solid;
  text-align: center;
  margin: 5px;
}
.row:nth-child(2) {
  width: 20vw;
}
.row:nth-child(1) {
  width: 30vw;
}
.row:nth-child(1) .item:nth-child(1) {
  height: 50vh;
}
.row:nth-child(1) .item:nth-child(2) {
  height: 100vh;
}
.row:nth-child(2) .item:nth-child(1) {
  height: 30vh;
}
.row:nth-child(2) .item:nth-child(2) {
  height: 120vh;
}

<div class="maincontainer">
  <div class="row">
    <div class="item">Tarifs</div>
    <div class="item">voir</div>
  </div>
  <div class="row">
    <div class="item">directment</div>
    <div class="item">formula</div>
  </div>
</div>

我的专栏内容正在包装到中间内容的新列

2 个答案: