0

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

这是我的网站：

http://violetoeuvre.com/

在第一种情况下，边距很好；在第二种情况下，不是。

<!-- 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;，该属性将该<div>元素从文档流中取出。如果您删除该 float 属性，您会看到文档再次流动，并且不会位于' 的边距<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

如果要浮动，请在 .line 中添加 clear:both

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

于 2013-03-26T19:46:07.030 回答
0

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

  1. ID 在页面上是唯一的，但您有四个 id 为“side_wrapper_text”的 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 回答