Question

我有2个DIV元素（下面标有“模块”的元素不正确！当我试图漂浮它们时，它们并排出现，它们跳出父容器并跌落到下方它。我无法解决这个问题，有人可以帮忙吗？

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添加溢出：auto，这非常容易我在这里为你做了它，它的工作原理。

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

#content {
...
overflow:auto;
}

享受并+1我：）

Answer 2

不是最优雅的解决方案，但我在您<br style="clear:both">中的第二个.module下方添加了container，这似乎可以解决问题，但违反了语义标记。

http://jsfiddle.net/FAPCW/1/

这是一个常见问题，通常用“clearfix”修复。

存在许多版本。以下是关于一般问题的更多详细信息：http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

以下是更多信息：https://stackoverflow.com/a/10184992/363701

继承人我使用的是：

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

你只需将cf类放在你的容器上，浮动的孩子就会被正确清除。

Answer 3

典型的新手！在'float' divs的末尾使用一个清除两种风格的div。

         <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 style="clear:both"></div>*    
    </div>
</div>

无法使DIV在父div中浮动

3 个答案: