2 4 divでそれぞれの行を配置することはできません。回答例

Question

4つのdivを連続して配置したいのですが、divの1つをクリックしていくつかの情報で展開する方法で下の1つを押し下げます。 8つのdivのクラスは同じです。私はdisplay：inline-blockを試しましたが、divの1つが展開されると、下の4つのdivがすべて下がります。あなたの助けに感謝します。ありがとう。

クリックした後

、とdivが、それはこのする必要があります展開します

Answer 1

だからここに私はこの使用してPHPをした方法についてのコードがあります。私はWordpressでこれを行う必要があったので、コードは基本的にWordpressのコードです。

get_header('home'); ?> 

    <?php 
$args = array('post_type' => 'the_teams', 'posts_per_page' => 9999); 
$the_query = new WP_Query($args); 
?> 
<?php if ($the_query->have_posts()) : 
$n=0;?> 
<?php while ($the_query->have_posts()) : $the_query->the_post(); 
$n++; 
if ($n == 1):?> 
<div class="block-wrapper"> 
<?php endif; 

if ($n < 3):?> 
<div class="team<?php echo $n;?>"> 
<div class="holder"> 
<div class="line1"></div> 
<div class="title"><?php echo the_title();?></div> 
<div class="line2"></div> 
</div> 

<div class="image"><img src="<?php echo the_post_thumbnail_url(); ?>" /></div> 
<div class="text"><?php echo get_field("short_description"); ?></div> 
</div> 
<?php endif;  

if ($n ==2): 
    $n=0; ?> 
</div> 
<?php endif; ?> 


<?php 
endwhile; 
endif; 
?> 


<?php get_footer(); ?> 

私がここで行ったことは、コードを4回実行したことです。私は8つの投稿を持っています、それぞれの緑の正方形は投稿です。だから、それは4回作成され、その中にPHPは をドロップし、それ以降はすべて開始されます。ここにhtmlがあります

<div class="block-wrapper"> 
<div class="team1"> 
<div class="holder"> 
<div class="line1"></div> 
<div class="title"></div> 
<div class="line2"></div> 
</div> 

<div class="image"><img src=""></div> 
<div class="text"></div> 
</div> 


<div class="team2"> 
<div class="holder"> 
<div class="line1"></div> 
<div class="title"></div> 
<div class="line2"></div> 
</div> 

<div class="image"><img src=""></div> 
<div class="text"></div> 
</div> 
</div> 

このコードは4回4列に印刷します。その後、display：inline-blockをブロックラッパーに設定して、余白の右プロパティを設定したいと思っています。それが役に立てば幸い。