html div 不包含应有内容的问题
Issues with html divs not containing what they should
http://i.stack.imgur.com/zg35O.png
我的 div id="topcol" 显示的区域比应有的小得多。它应该包括 4 "options"。选项是相对的,因此选项标题可以是绝对的,并覆盖每个选项中的图像。
我意识到这可能是一个非常基本的错误,但我已经为此苦苦挣扎了几个小时
html:
<div id="cols">
<div id="topcol">
<h1 id="content_title">BrightWell Smart Page Services</h1>
<div class="options" id="op1" name="General Links"><img class="optionicons" src="generalLinks.jpg"/><span class="optiontitle">General Links</span></div>
<div class="options" id="op2" name="Useful Online Tools"><img class="optionicons" src="Toolbox.jpg"/><span class="optiontitle">Useful Online Tools</span></div>
<div class="options" id="op3" name="IT Links"><img class="optionicons" src="ITSupport.jpg"/><span class="optiontitle">IT Links</span></div>
<div class="options" id="op4" name="Utility"><img class="optionicons" src="utility.jpg"/><span class="optiontitle">Utility</span></div>
</div>
<div id="botcol">
<div id="infopanel">
</div>
</div>
</div>
css:
html {
font-family: 'FuturaW01-LightCondense 774878',Helvetica,Arial,sans-serif;
font-weight: lighter;
}
#cols {
z-index:1;
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
}
#topcol {
height:auto;
width:100%;
}
#botcol {
width:100%;
}
#content_title {
font-size: 32px;
line-height: 1.2;
}
.options {
margin-left:2.5%;
margin-right:2.5%;
height:30%;
width:19%;
float:left;
border: black solid 1px;
position:relative;
}
#op1{
}
#op2{
}
#op3{
float:right;
}
#op4{
float:right;
}
.optiontitle {
color: blue;
position:absolute;
top:0;
left:0;
text-align:center;
font-size:200%;
width:100%;
}
.optionicons {
height:100%;
width:100%;
}
#infopanel {
width:100%;
height:100%;
}
由于您浮动了子 div,它们从正常流中移除并且父 (topcol) 崩溃,就好像它们不存在一样。您可以将 overflow:auto
添加到您的 #topcol 规则以恢复您想要的行为。
如果您从 css 中删除 float:right,它对我有用。
我删除了这些人。
#op1{
}
#op2{
}
#op3{
float:right;
}
#op4{
float:right;
}
这是您想要的还是您在寻找其他东西?
尝试添加到您的#topcol clearfix hack,以便它可以容纳它的浮动子项。
#topcol {
height:auto;
width:100%;
}
#topcol:after {
content: "";
display: block;
clear: both;
}
#topcol {
height:auto;
width:100%;
overflow:auto
}
添加溢出:自动;会做的
编辑:好像有人在我之前回答过这个问题
将这些图像设为背景图像,不要对任何元素使用 position
属性,请在此处尝试浮动和边距。
http://i.stack.imgur.com/zg35O.png
我的 div id="topcol" 显示的区域比应有的小得多。它应该包括 4 "options"。选项是相对的,因此选项标题可以是绝对的,并覆盖每个选项中的图像。
我意识到这可能是一个非常基本的错误,但我已经为此苦苦挣扎了几个小时
html:
<div id="cols">
<div id="topcol">
<h1 id="content_title">BrightWell Smart Page Services</h1>
<div class="options" id="op1" name="General Links"><img class="optionicons" src="generalLinks.jpg"/><span class="optiontitle">General Links</span></div>
<div class="options" id="op2" name="Useful Online Tools"><img class="optionicons" src="Toolbox.jpg"/><span class="optiontitle">Useful Online Tools</span></div>
<div class="options" id="op3" name="IT Links"><img class="optionicons" src="ITSupport.jpg"/><span class="optiontitle">IT Links</span></div>
<div class="options" id="op4" name="Utility"><img class="optionicons" src="utility.jpg"/><span class="optiontitle">Utility</span></div>
</div>
<div id="botcol">
<div id="infopanel">
</div>
</div>
</div>
css:
html {
font-family: 'FuturaW01-LightCondense 774878',Helvetica,Arial,sans-serif;
font-weight: lighter;
}
#cols {
z-index:1;
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
}
#topcol {
height:auto;
width:100%;
}
#botcol {
width:100%;
}
#content_title {
font-size: 32px;
line-height: 1.2;
}
.options {
margin-left:2.5%;
margin-right:2.5%;
height:30%;
width:19%;
float:left;
border: black solid 1px;
position:relative;
}
#op1{
}
#op2{
}
#op3{
float:right;
}
#op4{
float:right;
}
.optiontitle {
color: blue;
position:absolute;
top:0;
left:0;
text-align:center;
font-size:200%;
width:100%;
}
.optionicons {
height:100%;
width:100%;
}
#infopanel {
width:100%;
height:100%;
}
由于您浮动了子 div,它们从正常流中移除并且父 (topcol) 崩溃,就好像它们不存在一样。您可以将 overflow:auto
添加到您的 #topcol 规则以恢复您想要的行为。
如果您从 css 中删除 float:right,它对我有用。
我删除了这些人。
#op1{
}
#op2{
}
#op3{
float:right;
}
#op4{
float:right;
}
这是您想要的还是您在寻找其他东西?
尝试添加到您的#topcol clearfix hack,以便它可以容纳它的浮动子项。
#topcol {
height:auto;
width:100%;
}
#topcol:after {
content: "";
display: block;
clear: both;
}
#topcol {
height:auto;
width:100%;
overflow:auto
}
添加溢出:自动;会做的
编辑:好像有人在我之前回答过这个问题
将这些图像设为背景图像,不要对任何元素使用 position
属性,请在此处尝试浮动和边距。