1

私は正しく動作しようとしている次のコードを持っています:

<div id="newspost_bg">
                    <article>
                        <p>
                        <header><h3>The fast red fox!</h3></header>
                        This is where the article resides in the article tag. This is good for SEO optimization.
                        <footer>Read More..</footer>
                        </p>
                    </article>
                </div>
                <div id="newspost_bg">
                    hello
                </div>
                <div id="newspost_bg">
                    hello
                </div>
                <div id="advertisement">
                    <script type="text/javascript"><!--
google_ad_client = "ca-pub-2139701283631933";
/* testing site */
google_ad_slot = "4831288817";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
                </div>

これに付随するcssは次のとおりです。

#newspost_bg{
    position: relative;
    background-color: #d9dde1;
    width:700px;
    height:250px;
    margin: 10px;
    margin-left: 20px;
    border: solid 10px #1d2631;
    float:left;
}

#newspost_bg article{
    position: relative;
    margin-left: 20px;
}
#advertisement{
    float: left;
    background-color: #d9dde1;
    width: 125px;
    height: 605px;
    margin: 10px;
}

私が経験している問題は、設定しようとしている広告が newspost_bg の id を持つ最後の広告と一致することですが、広告が入っているコンテナーの上部に合わせようとしています。これで十分な情報かどうかわかりません、そうでない場合は、何が必要か教えてください。Web コーディング シーンは初めてなので、あらゆる批評が役に立ちます。

4

3 に答える 3

0

ここにいくつかの問題があります:

まず、内部に記事を含む div があります。これは、記事が div の代わりになる可能性があるため、必要ありません。次に、古い仕様でも、記事の本文、およびph1などpを保持する必要があり、タグを使用するという考えが壊れます。headerfooter, when s should never have header elements (, h3article

次に、前述のように、すべて同じ ID を持つ 3 つの div があります。

第三に、メインの div に相対配置を使用していますが、これはフローティングには役立たないと思います (おそらく私が間違っているかもしれません)。相対配置は、絶対配置されている子要素に対してのみ役立ちます。

最後の点を言ったが、私は間違っている可能性があります.

HTML:

<section id="articles">
    <article class="newspost_bg">
        <header><h3>The fast red fox!</h3></header>
            <p>This is where the article resides in the article tag. This is good for SEO optimization.</p>
        <footer>Read More..</footer>
    </article>
    <article class="newspost_bg">
        hello
    </article>
    <article class="newspost_bg">
    hello
    </article>
</section>
<aside id="advertisement">
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-2139701283631933";
    /* testing site */
    google_ad_slot = "4831288817";
    google_ad_width = 120;
    google_ad_height = 600;
    //-->
    </script>
</aside>

section要素を使用して要素をラップし、広告ブロックにarticleを使用していることに注意してください。aside追加の目的で div を内部に配置することもできますが、上記は軽量でユーティリティ ラッパーを使用しないドキュメントであり、さらに div を追加する前に開始するのに適していると思います。

CSS:

#articles {
 position: absolute;   
}
#articles > article {
    background-color: #d9dde1;
    width:300px;
    height:250px;
    margin: 10px;
    margin-left: 20px;
    margin-right: -140px;
    border: solid 10px #1d2631;
}

#advertisement {
    float: right;
    background-color: #d9dde1;
    width: 125px;
    height: 605px;
    margin: 10px;
    border: 1px dashed black;
}​

article 要素のラッパーとしてのセクションは絶対に設定されており、他の配置、フロート、または負のマージンは記事に設定されていないことに注意してください。aside は右側にフロートするように設定されているため、セクションの親でもある親 (この場合は body または html タグを想定しています) の上部にフロートするため、横に並んでいます。

フロートが実際に他のセクションを押しのけるためにセクション（またはdivなど）を絶対に設定する必要がある理由がはっきりしないことは認めますが、ここの他の誰かがそれをクリアできると確信しています。

于 2012-04-10T01:09:37.113 に答える
0

すぐにわかる最初の問題は、同じ ID を複数の要素に割り当てることです。各要素には一意の ID のみを割り当てることができます。おそらく必要なのは、CSS で次のようにアクセスされるクラスです。

.classname {
    /*styling rules*/
}

次に、記事が HTML の順序でページに表示されます。つまり、HTML の最後の記事をリストの最初の記事にするために CSS を (まともに) 使用することはできません。並べ替えるには JavaScript を使用できますが、それほど簡単ではありません。あなたが作成しようとしているのは、サーバー側の機能が必要な Web ページのようです。それ以外の場合は、古い記事の前に各記事を手動で作成する必要があります。

于 2012-04-09T23:12:11.293 に答える
0

3 つの div 幅 700px を隣り合わせに構成しようとしています。画面が非常に大きい場合を除き、これは非常に複雑です。

これ以外 同じ id を使用していますが、これは意味的に正しくありません。代わりにクラス名を指定してください。

次に、CSSを次のように変更します

.newspost_bg{
    position: relative;
    background-color: #d9dde1;
    width:700px;
    height:250px;
    margin: 10px;
    margin-left: 20px;
    border: solid 10px #1d2631;
    float:left;
}

.newspost_bg article{
    position: relative;
    margin-left: 20px;
}
于 2012-04-09T23:12:25.447 に答える