0

ホームページの 2 列の投稿が、スマートフォンでも 2 列として表示されるようにサイトをプログラムすることはできますか? 私はレスポンシブ テーマである 22 の子テーマを使用していますが、投稿の 2 つの列を作成するために使用したコードは非常に初歩的であるため、スマートフォンで 1 つの列に結合するだけです。

以下は、私の index.php からのコードの抜粋で、2 つの列を作成する方法を示しています。これらの div は、style.css ファイルの単純な CSS にも対応しています

スマートフォンでも 2 つの独立した列として表示できるのであれば、別の方法で列を作成したいと思います。

サイトは次のとおりです: internalcompass.us/castle ページを見たい場合

ありがとう

</div>
<div id="right-column">
<?php $my_query = new WP_Query('category_name=favorites');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate[] = $post->ID ?>
  <?php get_template_part( 'content', get_post_format() ); ?>
  <?php endwhile; ?>
</div>
<div id="left-column">
<?php $my_query = new WP_Query('category_name=Recents');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate[] = $post->ID ?>
  <?php get_template_part( 'content', get_post_format() ); ?>
  <?php endwhile; ?>
</div>
4

1 に答える 1

1

右列と左列の幅を 270px から 50% に変更します。その後、ウィンドウが 600 ピクセルを超える場合 (最近のほとんどの携帯電話)、2 つの列が表示されます。

つまり、 style.css (メイン テーマの style.css ではない) を編集して、次のように変更します。

div#left-column {
    width: 270px;
    float: left;
    clear: none;
    }
div#right-column {
    width: 270px;
    float: right;
    clear: none;
    }

に：

div#left-column {
    width: 50%;
    float: left;
    clear: none;
    }
div#right-column {
    width: 50%;
    float: right;
    clear: none;
    }

これを行った後、少しパディング/マージンルームを追加したいかもしれません.

それはあなたが探しているものですか？

于 2013-08-03T18:48:14.370 に答える