0

同じクラスセレクターを使用していますが、動作が異なる理由がわかりません。

これが私のウェブサイトです：

http://violetoeuvre.com/

最初の例では、マージンは問題ありません。2番目のケースでは、そうではありません。

<!-- Side Navigation__________________________________-->
    <div class="side_nav_wrapper">
        <div class="side_nav_photos" id="side_wrapper_text">photos</div>
        <div class="side_nav_about" id="side_wrapper_text">about</div>
        <div class="side_nav_writing" id="side_wrapper_text" >writing</div>
        <div class="side_nav_contact" id="side_wrapper_text">contact</div>
    </div>

<!-- CONTENT____________________________________________-->

<div class="content_wrapper">

<!-- Photo __________________________________________-->

    <div class="home_photo">
    </div>

    <hr class="line">
<!-- About___________________________________________________-->

    <div class="home_text">
        <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; the theme of her thesis about contextualizing female rappers, ETC.
    </p>
    </div>

    <hr class="line">

（また、なぜこのクラスが適用されないのか理解できません:)

#side_wrapper_text a:link{
        font-family: 'Playfair Display', sans-serif;
        font-size: 20px;
        font-weight: 100; 
        color:rgba (255,255,255,1);
        text-decoration: none; 
        text-align: center;
        letter-spacing:0.2em;

}

<div class="side_nav_wrapper">
        <div class="side_nav_photos" id="side_wrapper_text">photos</div>
        <div class="side_nav_about" id="side_wrapper_text">about</div>
        <div class="side_nav_writing" id="side_wrapper_text" >writing</div>
        <div class="side_nav_contact" id="side_wrapper_text">contact</div>
    </div>

ありがとうございました！！

4

3 に答える 3

1

クラスhome_textは属性を適用します。これにより、ドキュメントフローからfloat: left;その要素が削除されます。そのfloat属性を削除すると、ドキュメントフローが再び尊重され、の余白の 上に配置されない<div>ことがわかります。<div><hr>

clear: bothまたは、次のように修正することもできます。

cssファイル内：

.clearer { clear: both; }

マークアップで：

<div class='home_text'>...</div>
<div class='clearer'></div>
<hr class='line' />
于 2013-03-26T19:43:57.953 に答える
0

物事をフロートさせる場合は、clear：bothを.lineに追加します

また、（＃side_wrapper_textのように）ページ上に配置される以上の場所に配置される場合は、IDではなくクラスを使用する必要があります。また、適用するリンクがありません。

于 2013-03-26T19:46:07.030 に答える
0

質問の最初の部分を突き刺したことはありませんが、2番目の部分は2つあります。

  1. IDはページ上で一意である必要がありますが、IDが「side_wrapper_text」の4つのdivがあります。
  2. 次に、CSSを適用するためのアンカータグ（a）がありません。

代わりに、おそらく次のようなものが必要です。

#side_wrapper_text a:link{
    font-family: 'Playfair Display', sans-serif;
    font-size: 20px;
    font-weight: 100; 
    color:rgba (255,255,255,1);
    text-decoration: none; 
    text-align: center;
    letter-spacing:0.2em;

}

<div id="side_wrapper_text" class="side_nav_wrapper">
    <a href="#" class="side_nav_photos">photos</a>
    <a href="#" class="side_nav_about">about</a>
    <a href="#" class="side_nav_writing">writing</a>
    <a href="#" class="side_nav_contact">contact</a>
</div>
于 2013-03-26T19:47:28.827 に答える