【发布时间】：2013-11-21 10:53:44
【问题描述】：
http://www.walkerspencer.com/chrhsweb/max
所以我目前正在做一个高中项目，我完全被难住了。我的 div 之一，文章，没有表现出我想要的样子。它的高度为 0。现在，经过大量谷歌搜索和研究，这似乎是一个常见问题……对于包含浮动元素的容器。我的文章不包含浮动 div。我什至尝试从我的#buttons div 的 css 中删除浮动，但它没有任何效果。我还尝试了大多数建议的浮动修复：clearfix 方法，clear:both。在这一点上，我只需要一个外部意见。我在我的代码中找不到任何重大错误（除了普遍的混乱和对语义元素的滥用）。预期的行为是，随着浏览器调整大小，部分会缩放，同时保持 16:9 的比例，并且具有填充整个文章的黑色透明背景。我也可以将背景应用于文章，但文章也没有高度。如果您只是想批评我的不良代码习惯和格式，那也没关系:)。图像的缺失应该不重要，尽管它们的比例为 16:9，在添加任何 jquery 之前我遇到了这个问题。太感谢了。抱歉，如果我的帖子或我的提问方式有问题，这是我第一次在这里提问。
HTML：
<head>
<meta charset='utf-8'/>
<title>design</title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#images").cycle({
containerResize: false,
slideResize: false,
fit: 1
});
$('article').cycle({
activePagerClass: 'activeSlide',
containerResize: false,
slideResize: false,
fit: 1,
timeout: 0,
speed: 300,
startingSlide:0,
pager: "#buttons",
pagerAnchorBuilder: function(idx, slide) {
return '#buttons li:eq(' + idx + ')';}
});
$('#right').click(function() {
$('article').cycle("next");
return false;
});
$('#left').click(function() {
$('article').cycle("prev");
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div id="arrows">
<div id="left"><</div><div id="right">></div>
</div>
<nav>
<ul id="buttons">
<li><a href="#"></a>
<li><a href="#"></a>
<li><a href="#"></a>
<li><a href="#"></a>
<li><a href="#"></a>
</ul>
</nav>
<div class="fix"></div>
<article>
<section id="images">
<img src="images/alaska.jpg" width="100%" height="auto"/>
<img src="images/field.jpg" width="100%" height="auto"/>
<img src="images/sunset.jpg" width="100%" height="auto"/>
</section >
<section id="about">
<p>
my name is <span style="color:crimson">max</span>.<br>
i'm a senior in high school.<br>
i love <span style="color:yellow">code</span><br>
<span style="color:#a45bc4">&</span><br>
i love <span style="color:lightgreen">design</span>.<br>
<span style="color:#a45bc4">welcome to my site.</span>
</p>
</section >
<section id="work">
</section >
<section id="contact">
</section>
<section id="place">
</section>
</article>
<div id="bottom"></div>
</div>
</body>
CSS：
body{
background-image:url("images/clouds.jpg");
background-size:cover;
background-color:white;
background-repeat:no-repeat;
height:100%
}
#container{
width:70%;
min-height:103px;
margin:0 auto;
min-width:182px;
}
#arrows{
max-width: 140px;
height: 70px;
background: #f7f7f7;
-moz-border-radius: 70px 70px 0 0;
-webkit-border-radius: 70px 70px 0 0;
border-radius: 70px 70px 0 0;
margin:auto;
position:relative;
top:25px;
z-index:100;
border-top:1px solid;
border-color:#cccccc;
font-family:"Lato";
text-align:center;
vertical-align:middle;
line-height:60px;
font-size:68px;
color:#cfcfcf;
font-weight:100;
font-stretch:ultra-condensed;
}
#right:hover, #left:hover{
color:#a45bc4;
text-decoration:none;
}
#right, #left{
display:inline;
color:#cfcfcf;
text-decoration:none;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav{
width:calc(100%-2px);
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
height:35px;
background-color:#f7f7f7;
min-width:182px;
}
#buttons{
position:relative;
float:right;
margin-right:6px;
z-index:100;
}
.fix{
clear:both;
}
.current{
padding-right:0px;
}
#buttons li{
display:inline-block;
height:26px;
width:26px;
background-image:url("images/navc.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:24px;
margin-left:8px;
margin-top:4px;
vertical-align:middle;
cursor:pointer;
}
#buttons li:hover{
opacity:.8;
}
#buttons a{
color:black;
text-decoration:none;
}
#buttons li.activeSlide{
background-image:url("images/violetc.jpg");
height:26px;
width:26px;
background-size:26px;
vertical-align:middle;
}
article{
width:100%;
min-width:184px;
height:100%;
}
section{
height:100%;
width:100%;
margin:0 auto;
text-align:center;
vertical-align:middle;
color:white;
font-weight:100;
font-size:36px;
font-family:"Lato";
background-color:rgba(0,0,0,.4);
}
p{
}
#about{
}
.option img{
opacity:.6
}
.option:hover{
opacity:.8;
}
#bottom{
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
border-bottom:1px solid #cfcfcf;
height:30px;
background-color:#f7f7f7;
min-width:182px;
margin-top:56.25%;
}
@media all and (max-width:690px){
#buttons{
margin-top:2px;
width:98%;
text-align:center;
}
nav{position:relative;
text-align:center;}
}
【问题讨论】：