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>

.outercontainer中应用于浮动div的任何样式都可以添加到其他CSS类中，例如.main。

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

如何解决CSS宽布局问题？

fiddle

1 个答案: