1

我有 2 个 DIV 元素（下面标有“模块”的那些不正确！当我尝试浮动它们时，它们会并排显示，它们会跳出父容器并落在它下面。我一直无法解决这个问题，有人可以帮忙吗？

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

3 回答 3

4

这非常简单，您只需在内容 div 上添加溢出：自动我在这里为您完成了它，它可以工作。

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

#content {
...
overflow:auto;
}

享受并 +1 我 :)

于 2013-04-12T21:33:24.177 回答
1

不是最优雅的修复，但我在你<br style="clear:both">的第二个下方添加了一个，这似乎可以解决问题，尽管违反了语义标记。.modulecontainer

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类放在容器上，漂浮的孩子就会被正确清除。

于 2013-04-12T21:23:14.837 回答
1

典型的新手玩意！在“浮动” div 的末尾使用具有清晰两种样式的 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>
于 2013-04-12T21:23:31.057 回答