html - 无法使 DIV float 在父 div 中

Question

我有 2 个 DIV 元素(下面标有“模块”的元素不正确!当我尝试 float 它们以便它们并排显示时，它们会跳出父容器并落在下方它。我一直无法弄清楚，有人可以帮忙吗？

jsfiddle:jsfiddle

HTML

    <div id="contentwrap">
        <div id="content">
            <div>
                <span style="text-align:center;">
                    <h2>Application Title</h2>
                </span>
            </div>
            <br/>
            <br/>
            <div class="module">
                <a class="modlink" href=" ../csc/index.php">
                    <img class="modimg" src="./images/csc.png" alt="csc"/>
                    <br/>Client Support Center
                </a>
                <br/>
            </div>
            <div class="module">
                <a class="modlink" href=" ../icm/index.php">
                    <img class="modimg" src="./images/icm.png" alt="icm"/>
                    <br/>Inventory Control Management
                </a>
                <br/>
            </div>                
        </div>
    </div>

CSS

    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 13px;
        color:#E1E6FA;
        background-color:#183152;
    }

    p {
        padding: 10px;
    }

    h1 { 
        font-size: 2em; 
    }
    h2 { 
        font-size: 1.5em; 
    }
    h3 {
        margin-bttom:2px;
    }

    #wrapper {
        margin: 0 auto;
        width: 1000px;
    }

    #headerwrap {
        width: 1000px;
        float: left;
        margin: 0 auto;
    }

    #header {
        height: 100px;
        background: #375D81;
        border-radius: 10px;
        border: 1px solid #C4D7ED;
        margin: 5px;
    }

    #contentwrap {
        width: 820px;
        float: left;
        margin: 0 auto;
    }

    #content {
        background: #ABC8E2;
        border-radius: 10px;
        border: 1px solid #C4D7ED;
        margin: 5px;
        color:black;
    }


    #companylabel {
        margin: 10px;
        top:50%;
        position:absolute;
        margin-top:-.5em;
    }

    #loginbox
    {
        width:100%;

    }

    #loginboxbot
    {
        width:100%;

    }

    .ra
    {
        text-align:right;
    }

    #borderresults {
        color:orangered;
        font-weight:bold;
        padding:0px;
        margin:0px;
        border-radius:10px;
    }

    #alert {
        background-color:yellow;
    }

    .module {
        text-align:center;
        width:120px;
        padding:5px;
        border-radius:5px;
        border: 1px solid #E1E6FA;
        color:#E1E6FA;
        background-color:#375D81;
        float:left;
    }

    .modimg {
        height:100px;
        width:100px;
    }

    .modlink {
        color:#E1E6FA;
        text-decoration:none;
    }

Answer 1

这非常简单，您只需在内容 div 上添加 overflow:auto我在这里为你做了，它有效。

http://jsfiddle.net/alaingoldman/FAPCW/5/

#content {
...
overflow:auto;
}

享受并为我 +1 :)