我的 CSS 中的“auto”属性有问题。当我将高度设置为“自动”时，我的#container div 忽略了我的#info div 嵌套在其中的事实，并且只覆盖了导航栏和图像。这意味着我的#info div 设置为黑色背景，即使 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;
}
最佳答案
尝试使用 Sibling Selectors .如果使用它，继承其中的子标签会更容易。
关于html - CSS "Auto"高度属性和嵌套 Div 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18006159/