Question

我正在使用相同的类选择器，但我不明白它为什么表现不同。

这是我的网站：

首先，保证金很好;在第二种情况下，不是。

<!-- 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>

谢谢!!

Answer 1

您的班级home_text会应用属性float: left;，该属性会将<div>元素从文档流中移出。如果删除该浮动属性，您会看到<div>再次尊重文档流，并且不会位于<hr>边距之上。< / p>

或者，您可以使用clear: both来解决此问题：

在你的css文件中：

.clearer { clear: both; }

在您的标记中：

<div class='home_text'>...</div>
<div class='clearer'></div>
<hr class='line' />

Answer 2

添加一个明确的：如果你要漂浮的东西，都要.line。

另外你真的应该使用一个类，而不是一个id，如果它不仅仅是在页面上的某个位置（比如#side_wrapper_text），你也没有任何链接可以应用它。

Answer 3

没有对问题的第一部分进行尝试，但第二部分是双重的：

ID在页面上是唯一的，但你有四个id为'side_wrapper_text'的div
其次，您没有要应用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>

为什么我的hr标签在两个地方表现不同？

3 个答案: