css - 如何解决 CSS 宽布局问题？

Question

我的布局默认宽度为 987px 并居中对齐，目前正在处理网站的宽布局功能。 CSS布局结构如下:

<div id="BodyContainer">
    <div class="headerouter">
        <div class="outercontainer">
            <uc:Header ID="header1" runat="server" /> 
        </div>
    </div>
    <div class="outercontainer">                
        <div class="main container">
            <asp:ContentPlaceHolder id="CPM" runat="server">

            </asp:ContentPlaceHolder>
        </div>
    </div>
</div>
<div class='footer'></div>

就好像有人选择了一个宽布局，比如有超过 3 列的记录，比如 4、5、6 或 7，然后在服务器端，CSS 被计算覆盖，即

outercontainer = no. of columns * 330px;
container = no. of columns * 330px;

作为响应，外部容器宽度增加，但 BodyContainer 和页脚保持不变，布局中断。并帮助或解决此问题，但仅在 CSS 中。

CSS如下:

body {

    font-family: Helvetica, Arial, sans-serif;
    font-size: 75%;
    margin: 0;
    height:100%;
    color: #444;
    background:url('/images/container-back.png') repeat;

    /*Opera Fix*/
    &:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
}


html, form { height: 100%; }

#BodyContainer {
    overflow:visible;
    /*padding-bottom: 130px;*/
    min-height:100%; 
    display:block;  
}

.outercontainer {
    width: 987px;
    margin: 0px auto 0px auto;
    padding: 5px 0px 80px 0px;
    position: relative;  
    display:block;

    &:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
}

.container {
    width: 987px;
    /*width: 1330px;*/
}

检查问题所在

fiddle

Answer 1

新答案

好的 - 看来您在 HTML 中混淆了您的 .outercontainer。如果我删除额外的 .outercontainer div 并将类添加到 #BodyContainer 中，那么这似乎可以解决问题:

<div id="BodyContainer" class="outercontainer">
    <div class="headerouter">
        <uc:Header ID="header1" runat="server" /> 
    </div>            
    <div class="main container">
        <asp:ContentPlaceHolder id="CPM" runat="server">

        </asp:ContentPlaceHolder>
    </div>
</div>
<div class='footer'></div>

应用于 float div 的 .outercontainer 中的任何样式都可以添加到不同的 CSS 类，例如 .main。

JSFiddle:http://jsfiddle.net/TzAsq/9/