0

WordPressブログで一部のDIVのスタイルを設定するのに問題があります。これはWordPressフォーラムに投稿しますが、実際のWordPressの問題というよりはCSS/HTMLの問題だと思います。先駆者として、コーディングを試すために、今はすべてをインラインでスタイリングしていると言います（完了したら、すべてを外部スタイルシートに転送します...人々がインラインで私に飛びつくと思いました私が何も言わなかった場合のスタイリング:)）。

基本的に、ネストされたdivを実行しようとしている、または順序付けされていないリストの各リスト項目間にマージンを設定しようとしています。私が生成したリストは、基本的にブログ周辺の他の投稿から取得した情報であり、特定のカテゴリ（PHPとは何か）の最新の投稿を表示します。

間に余白なく表示されています。これは、隣り合った2つのdivです（左側のdivは記事の画像を表示し、右側のdivは投稿のタイトルと「抜粋」を表示します）。これらの2つのdivを1つの大きなdivにネストして、移動してマージンを追加できるようにしたかったのですが、親divを追加しようとすると、親が4pxの高さで、他の2つをネストしていないdivとして表示されます。 。

私も<li>それ自体をスタイリングしようとしましたが、li全体にマージンを追加すると、2つの並べたdivが整列しなくなります。

JSFiddleを実行していないので、申し訳ありません。JSFiddleでは実行できなかったコード全体（PHPを含む）を含めたいと思いました。

助けてくれてありがとう！

<ul style="list-style-type:none;">
    <?php
    global $post;
    $category = get_the_category($post->ID);
    $category = $category[0]->cat_ID;
    $myposts = get_posts(array('numberposts' => 5, 'offset' => 0, 'category__in' => array($category), 'post__not_in' => array($post->ID),'post_status'=>'publish'));
    foreach($myposts as $post) :
        setup_postdata($post);
        ?>
        <li>
            <a href="<?php the_permalink(); ?>">

                <div id="image_con" style="float:left; border:1px solid black; width:200px; height:200px; background-color:black; overflow:hidden;">
                    <div id="image_recent" style="margin-left:-50px;">
                        <?php set_post_thumbnail_size( 300, 300 );
                            the_post_thumbnail(); ?>
                    </div>
                </div>

                <div id="cr_content" style="float:right; border:1px solid black; width:356px; height:200px;">
                <?php 
                    the_title();
                    the_excerpt();
                ?>
                </div>

            </a>
        </li>
    <?php endforeach; ?>
   <?php wp_reset_query(); ?>
   </ul>
4

2 に答える 2

1

コードをインデントすると、次のようになります。

<a>
  <div>

そして、それはルールを破っています:<div>インライン要素 ( ) 内にブロック レベル要素 ( )<a>はありません: したがって、ブラウザが非標準コードでのフォールバックに対して行うことは何でもあります。

それが機能すれば、アンカーのヒットカバレッジが巨大になります...

さらに遠く：

<div style="float:left">
<div style="float:right">

これらは何を浮かんでいますか？さらに下のブロックを強制する何かが必要です (たとえば、スタイルを設定clear: bothするか、一方のフロートともう一方の幅 + 境界線 + パディングに一致するサイズのマージンを使用するだけです)。

于 2012-07-18T17:06:20.820 に答える
0

私がすぐに見ることができるいくつかの問題：

  1. タグを閉じていません<ul>。
  2. インライン要素内にブロックレベルの要素を配置しています。それらをブロックレベルの要素として宣言する必要があります。

ここでこれに取り組みましょう: http://jsfiddle.net/vPqDf/1/

于 2012-07-18T15:03:41.577 に答える