Question

好的家伙所以我创建了多个div类，它们似乎有效。但是当我想在它们下面添加另一个div类时，它就不会显示出来。

这是我的HTML代码;

<!DOCTYPE html>
<html>
<head>
<!--LINKING THE STYLESHEETS-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--DO NOT EDIT THIS STYLE SHEET-->
<link rel="stylesheet" type="text/css" href="reset.css">
<style>
html, body {min-width: 600px; background-image: url(bg.jpg);}

/*Navigation Bar*/
ul
{
list-style-type:none;
margin:0;
padding:0;
background-image: url(nav_bg.png);  background-repeat: repeat;
border-style: solid;
border-color: #fff;
width: 50em;
height: 50px;
margin-left: auto;
margin-right: auto;
}
ul.nav {
margin-left: auto;
margin-right: auto;
margin-top: 1em;
width: 80%;
text-align: center;
border-style: solid;
border-color: #fff;
border-width: 2px;
}
li
{
display:inline;
text-align: center;
margin: 30px;

}
.nav a {
line-height:50px;
}

@font-face {
font-family: corbel;
src: url('fonts/corbel.ttf');
}
@font-face {
font-family: orator;
src: url('fonts/OratorStd.otf');
}
/*CUSTOMIZING THE LINKS*/
a {
color: #fff;
text-decoration: none;
font-family: corbel;
font-size: 18px;
}
a:visited {
color: #fff;
}
a:active {
color: #fff;
}
a:hover {
color: #111;
}
/*THE CONTAINERS*/
.box-long {
width: 80%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
.box-half-long {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 9.9%;
margin-top: 1em;
float: left;
}
.box-half-long-r {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 50.5%;
margin-top: 1em;
}
/*Keeping images in containers even when browser resizes. */
img {
width: 100%;
height: 100%;
}
/*styling headers*/
h1.center {
text-align: center;
line-height: 110px;
font-size: 30px;
color: #fff;
font-family: orator;
}
h2.center {
text-align: center;
line-height: 110px;
font-size: 30px;
color: #fff;
font-family: orator;
}
</style>
</head>

<body>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<div class="box-long">
<h1 class="center">SERVER BANNER HERE</h1>
<!--YOU COULD AD AN IMAGE HERE. REMOVE THIS COMMENT AND DELETE THE <H1> TAGS TO SEE
IT WORKING WITH AN IMAGE. IMAGE SIZE IS -->
<!-- REMOVE ME FOR IMAGE // <img src="server_banner.jpg"> // -->
</div>

<div class="box-half-long">
<h2 class="center">SUB-CAT 1</h2>
</div>

<div class="box-half-long-r">
<h2 class="center">SUB-CAT 2</h2>
</div>


</body>
</html>

以下是此代码所在的网站：here

所以，当我继续在最后添加一个新的div类时，例如，这个; （p.s，是的我知道div还没有在css中设置，这只是一个演示......）

    .box-newdiv{
width: 80%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}

它只是没有出现？

编辑：链接现在正在查看。

Answer 1

我无法看到这个例子，但我注意到的第一件事是

.box-long {
height: 100px;

这可能就是为什么

编辑：适合我：http://jsfiddle.net/4rhAz/

Answer 2

您无法看到新div的原因是因为您为div提供了固定高度，其中的类名为＆＃34; box-half-long＆＃34;和＆＃34; box-half-long-r＆＃34;。

    .box-half-long-r {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 50.5%;
margin-top: 1em;
}

.box-half-long {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 9.9%;
margin-top: 1em;
float: left;
}

由于它们具有固定的高度，因此它们不会显示其中包含的低于100px高度的元素。

让身高适应＆＃39;到包含元素的高度。您可以通过以下方式执行此操作：

height :auto;

只需将这些类更改为：

.box-half-long-r {
    width: 39.4%;
    height: auto;
    border-style: solid;
    border-color: #fff;
    border-width: 2px;
    margin-left: 50.5%;
    margin-top: 1em;
    }

    .box-half-long {
    width: 39.4%;
    height: auto;
    border-style: solid;
    border-color: #fff;
    border-width: 2px;
    margin-left: 9.9%;
    margin-top: 1em;
    float: left;
    }

我添加了新的div，以便在将hieght更改为auto后显示它们。

请看这里：http://jsfiddle.net/Bj3vr/

希望这可以帮助您理解使用＆＃34; height as auto＆＃34;并解决了你的问题。

新Div表现得很奇怪？没出现？

2 个答案: