Question

我一直在处理我的第一个自适应网站，我的导航问题。

当我试图提高文本的大小时，我感到困扰的部分是主标题（#header_bar .heading h1 a）并没有留在#header_bar容器内。

我会尝试在不使用任何定位或负边距的情况下实现此目的，但我已经做得很短。

我在css reset中包含一个jsfiddle链接。我希望这是足够的信息，我真的很感激谁花时间看这个。

非常感谢！

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Anna Paulette</title>

    <!-- CSS FILES BEING LINKED -->
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="styles.css" />

</head>

<body>
    <div id="header_wrap">
        <section id="header_bar">
            <div class="heading">
                <h1><a href="#">Test TestTest</a>
                </h1>
            </div>

            <nav>
                <ul>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                    <li><a href="#">Test</a>
                    </li>
                </ul>
            </nav>


        </section>
    </div>
    <!-- end header_wrap -->

    <div id="header_content_wrap">

        <section id="header_content">
            <h1>Lorem ipsum dolor.</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
        </section>
        <!-- End header Content -->
    </div>

    <div id="header_dirt">
    </div>
    <!-- End header dirt -->

    <div id="content_wrap">

        <section id="main_content">
            <h1>Test Test Test</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex deserunt dignissimos officia est perferendis ut neque dolorum nesciunt quis quaerat. Quod, sunt, itaque, officia, quaerat esse similique doloremque quasi ex soluta adipisci illo ea quas officiis
                <cite>ratione odit magnam provident repellat inventore ab perspiciatis neque architecto rerum expedita</cite>.
                <strong>Quas, at!</strong>
            </p>
            <p><a href="www.google.com">www.google.com</a>
            </p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex deserunt dignissimos officia est perferendis ut neque dolorum nesciunt quis quaerat. Quod, sunt, itaque, officia, quaerat esse similique doloremque quasi ex soluta adipisci illo ea quas officiis ratione odit magnam provident repellat inventore ab perspiciatis neque architecto rerum expedita. Quas, at!</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, vero, ullam quam perferendis deserunt vel quasi voluptatem sapiente impedit natus sequi dolorum sunt eveniet aut.</p>
        </section>

        <section id="sidebar_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto alias quam consequatur cum voluptatum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolor.</p>

            <ul>
                <li>test test</li>
                <li>test test</li>
                <li>test test</li>
                <li>test test</li>
            </ul>
        </section>

        <section id="sidebar_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto alias quam consequatur cum voluptatum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolor.</p>

            <ul>
                <li>test test</li>
                <li>test test</li>
                <li>test test</li>
                <li>test test</li>
            </ul>
        </section>

    </div>
    <!-- end content_wrap -->

    <div id="footer_wrap">
        <section id="footer">
            <nav>
                <ul>
                    <li>test</li>
                    <li>tes</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </nav>

        </section>
        <!-- End footer -->
    </div>

    <!-- end footer_wrap -->

</body>

</html>


@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700,400italic,600italic,700italic);


/*-----------------------------------------------------------------
// Global Styles Styling
-----------------------------------------------------------------*/
body {
  color: #fff;
  background: url("") #AAAAAA repeat -20px -110px; 
}

body p, ul li {
  font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

a:link, a:visited {
  text-decoration: none;
  outline: none;
  color: #fc6b35;
}
a:hover {
  color: #ba3b0d;
}
body cite {
  font-style: italic;
}
body strong {
  font-weight: bold;
}

h1 {
  font-weight: normal;
  font-size: 36px;
}

h2 {
  font-weight: normal;
  font-size: 30px;

}

h3 {
  font-size: 22px;
  font-weight: normal;

}

h4 {
  font-size: 18px;
  font-weight: normal;
}

/*-----------------------------------------------------------------
// Header Styling
-----------------------------------------------------------------*/
#header_wrap {
  background-color:#001F3F;
  position:relative;
  top:0;
  -moz-box-shadow: 0px 2px 15px 0px #bebebe; 
  -webkit-box-shadow: 0px 2px 15px 0px #bebebe; 
  box-shadow: 0px 2px 15px 0px #bebebe; 
  clear: both;
}

#header_bar {
  background-color: #fdfdfd !Important;
  width:75%;
  margin: 0 auto;
  position: relative;
}

#header_bar .heading {
    clear: both;
    width: 100%;
    height: 100%;
    display: block;
}

#header_bar .heading h1 {
  display:block;
  float:left;
  height:100%;
clear:left;
}

#header_bar .heading h1 a {   
  color:#CFB590;
  font-family: 'Amatic SC', cursive;
  font-size: 2.2em;
  font-weight:700;
  height:100%;
}

#header_bar .heading h1 a:hover {   
  color:#49281F;
}

#header_bar nav { /* width: 50%; */ text-align:right; /* float: right; */ clear: right; /* background-color: orange; */ /* width: 680px; */ height: 100%;}
#header_bar nav ul {  list-style: none;   padding: 0px;   margin: 0px; font-weight: bold;   /* float: left; */  height: 100%;}
#header_bar nav ul li { display: inline-block; }
#header_bar nav ul li a { 
  display: block; 
  padding: 20px 20px; 
  text-decoration: none;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(78, 68, 60, 0.5);
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  font-family: 'Josefin Sans', sans-serif;

}
#header_bar nav ul li a:hover { background-color: #CFB590; color: #fff; }


#header_content_wrap {
  background: url("") #FF4136 repeat-x -20px -110px; 
  width:100%;
  height:250px;

}

#header_content {
  width:75%;
  height:100%;
  margin: 0 auto;
  background: #85144B url("") no-repeat 0px 10px; 
}

#header_content h1 {
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Tungsten A", "Tungsten B", Helvetica, Arial, sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  float:right;
  margin-top:20px;
  clear:both;
  color:#C96879;
}

#header_content h2 {
  float:right;
  clear:both;
}

#header_dirt {
  background: url("") #FF851B repeat-x -20px -110px; 
  width:100%;
  height:25px;
  clear: both;
}

/*-----------------------------------------------------------------
// Content Styling
-----------------------------------------------------------------*/
#content_wrap {
      background-color:#111111;    
  width:75%;
  margin: 0 auto;
  height:100%;
  overflow:hidden;

  clear: both;
}

#content_wrap p {
  margin:1.041666666667%; /*10 / 960*/
  line-height: 1.375em;

}

#main_content {
  width:65%; /* 672 / 960 */
  float:left;
  padding:1.041666666667%; /*10 / 960*/
  margin:1.041666666667%; /*10 / 960*/
  background-color: rgba(49, 44, 44, 0.2);
  background: rgba(49, 44, 44, 0.2);
}

#sidebar_content {
  width:26%; /* 288 / 960 */
  float:left;
  background-color: #001F3F;
  padding:1.041666666667%; /*10 / 960*/
  margin:1.041666666667%; /*10 / 960*/
  background-color: rgba(49, 44, 44, 0.2);
  background: rgba(49, 44, 44, 0.2);
}

/*-----------------------------------------------------------------
// Footer Styling
-----------------------------------------------------------------*/
#footer_wrap {
  background-color:#85144B;
  clear:both;
  position:relative;
  bottom:0;
  left: 0;
  height: 120px;
  width: 100%;
}

#footer {
  width:75%;
  margin:0 auto;
  background-color:#3D9970;
}

/*-----------------------------------------------------------------
// MEDIA QUERIES
-----------------------------------------------------------------*/

@media screen and (min-width: 951px) {
  h1 {font-size: 36px;} #header_bar .heading h1 a {text-align: center;}
}
@media screen and (max-width: 950px) {
  h1 {font-size: 24px;} #header_bar .heading h1 a {text-align: center;}
}
@media screen and (max-width: 749px) {
  h1 {font-size: 22px;} #header_bar .heading h1 a {text-align: center;}
}
@media screen and (max-width: 569px) {
  h1 {font-size: 20px;} #header_bar .heading h1 a {text-align: center;}
}
@media screen and  (max-width: 321px) {
  h1 {font-size: 18px; } #header_bar .heading h1 a {text-align: center;} #header_bar nav ul li a { font-size:12px;}
}

/*Navigation*/
@media (max-width:48.000em){
  #header_bar .heading h1 {width:100%;text-align: center;}
  #header_bar nav ul {  width: 100%; font-weight: normal;  }
  #header_bar nav ul li { width: 100%;  text-align: center;  }
  #header_bar nav ul li a { padding: 10px -10px; border-bottom: 1px solid #ccc; display: block;  padding:10px; margin:0;}
}

Answer 1

添加此CSS代码：

#header_bar nav:after { content:""; display:block; clear:both; }

请注意，问题是徽标（#header_bar .heading h1 a）有float:left，因此它没有上面的代码浮动在标题栏之外，这会清除浮动并阻止您的问题。

Answer 2

我使用clearfix来整理像这样的问题

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom:1;clear: both; }

-apply .clearfix到#header_content

- 将#header_content改为min-height：250px

- 在#header_content_wrap

上移除高度

 <div id="header_content_wrap">
    <section id="header_content" class="clearfix">
       <h1>Lorem ipsum dolor.</h1>
       <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
    </section>
 </div>

这里小提琴： http://jsfiddle.net/5J9LL/1/

奇怪的导航定位问题让我感到难过。

2 个答案: