Question

我的CSS中的“auto”属性有问题。当我将高度设置为“auto”时，我的#container div忽略了我的#info divs嵌套在其中的事实，并且只覆盖导航栏和图像。这意味着我的#info divs是在黑色背景下设置的，即使HTML显然将它们放在#container div中。我不确定问题出在哪里，所以这是我的代码（XXXXXXX是出于隐私原因）：

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="gen_stylesheet.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#container {
    height:auto;
}

#info {
    display:inline;
    width:50%;
}

#info ul {
    list-style-type:none;   
}

img {
    padding:0;
}
</style>
</head>

<body>
  <div id="container">
    <nav>
      <ul>
        <li><a href="#" id="page_on">Home</a></li>
        <li><a href="research.html">Research Topics</a></li>
        <li><a href="pubs.html">Publications</a></li>
        <li><a href="people.html">People</a></li>
      </ul>
    </nav>
    <header>
      <h1>Celestial and Spaceflight Mechanics Laboratory</h1>
    </header>

    <img src="assets/home_img.png" alt=""/>

    <div id="info" class="left">
      <ul>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li><br/></li>
        <li><a href="http://ccar.colorado.edu/scheeres/Scheeres/Home_files/vita_scheeres.pdf">Professional Information</a></li>
        <li><br/></li>
        <li><a href="http://www.colorado.edu/aerospace/scheeres_dan.html">Official CU Website</a></li>
      </ul>
    </div>

    <div id="info" class="right">
      <ul>
        <li>Address:</li>
          <ul>
            <li>XXXXXXX</li>
            <li>XXXXXXX</li>
            <li>XXXXXXX,/li>
          </ul>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
      </ul>
    </div>

  </div>
</body>
</html>

CSS

/**********General**********/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}

body {
background-image:url('assets/starry_night.jpg');
color:#000;
/*look for better font*/
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
text-align:center;
}

#container {
background-color:#FFF;
opacity:0.85;
}

#container, nav, #container header {
width:800px;
}

#container {
margin:5px auto;
}

/**********Navbar Styling**********/

nav {
height:auto;
margin:0;
padding:0;
}

nav ul {
list-style-type:none;
margin:0;
padding:0;
}

nav li {
display:inline;
}

nav a {
text-decoration:none;
padding:0 24px;
color:#000;
opacity:0.5;
}

nav a#page_on {
opacity:1;
}

/*****Hovering*****/

nav a {
transition:all;
}

nav a:hover {
opacity:1;
}

/**********Title Styling**********/

header {
margin:0;
padding:20px 0;
}

h1,h2,h3,h4,h5,h6 {
padding:0;
margin:0;
}

/**********"#info" Div(s) + Image Styling**********/

#info {
margin:0;
padding:0;
height:auto;
float:left;
}

#info ul {
text-align:left;
}

img {
margin:0;
}

/**********Miscellaneous**********/

strong {
font-weight:bold;
}

i {
font-style:italic;
}

.hidden {
display:none;   
}

Answer 1

尝试使用Sibling Selectors。如果你使用它，那么在其中继承子标签会更容易。

CSS“自动”高度属性和嵌套Div的问题

1 个答案: