html div 不包含应有的内容的问题答案

【问题标题】：Issues with html divs not containing what they shouldhtml div 不包含应有的内容的问题
【发布时间】：2015-05-31 23:29:26
【问题描述】：

http://i.stack.imgur.com/zg35O.png

我的 div id="topcol" 显示的区域比它应该显示的要小得多。它应该包括4个“选项”。这些选项是相对的，因此选项标题可以是绝对的，并覆盖每个选项中的图像。

我意识到这可能是一个非常基本的错误，但我已经为此苦苦挣扎了好几个小时

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%;
}

【问题讨论】：

标签： html css position css-position

【解决方案1】：

由于您浮动子 div，因此它们会从正常流程中移除，并且父级 (topcol) 会像它们不存在一样折叠。您可以将overflow:auto 添加到您的#topcol 规则中以恢复您所追求的行为。

【讨论】：

【解决方案2】：

如果你从你的 CSS 中移除 float:right 它对我有用。

JSBin example

我删除了这些人。

#op1{

}
#op2{

}
#op3{
    float:right;
}
#op4{
    float:right;
}

这是你追求的还是你在寻找别的东西？

【讨论】：

【解决方案3】：

尝试添加到您的#topcol clearfix hack，以便它可以容纳浮动的孩子。

#topcol {
height:auto;
width:100%;
}

#topcol:after {
  content: "";
  display: block;
  clear: both;
}

【讨论】：

【解决方案4】：

#topcol {
    height:auto;
    width:100%;
    overflow:auto
}

添加溢出：自动；会做的

编辑：似乎有人在我之前回答了这个问题

【讨论】：

【解决方案5】：

将这些图片设为背景图片，不要对任何元素使用position 属性，在此处尝试浮动和边距。

【讨论】：