Question

现在我可以自动调整容器div到内部div的大小，或者我可以将整个内容放在中心......但我无法弄清楚如何同时执行这两个操作。

下面是CSS / Layout，因为我有它。现在，page和main元素都居中，但如果内容超出一定的大小，则会越过边框，而不会重新调整元素大小。

布局

</head>
    <body>
        @using Monet.Common
        <div id="contentContainer">
            <div class="page">  
                @Html.Partial("NavBarPartial")
                <section id="main">
                    <div id="content">
                        @RenderBody()
                    </div>
                    <div id="footer">
                        <span style="color: Gray;"> </span>
                    </div> 
                </section>
           </div>            
        </div>     
    </body>
</html>

CSS

#contentContainer {
    width: 100%;    
}

.page 
{
    width: 50%;  /*1030px;/*75em;/*83.7em;*/
    margin-left: auto;
    margin-right: auto;
}

#content {
    padding: 20px;
}


#main 
{
    width:auto;
    display:block;
    height: auto;
    background-color: white; 
    /*border: 1px solid #999;*/
    border-radius: 5px 10px / 10px;
    -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);

}



footer, 
#footer 
{
    /*background-image: url('Images/TEST2body_bot.png');*/
    background-color: #fff;    
    background-repeat: no-repeat;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

修改

我遇到的问题最好用两个例子说明。在一个例子中，我有一个1030px宽的表。该表完全左对齐，但表的右边缘远远超出main元素的右边界。

另一个问题是一组单选按钮。当页面加载时，应该只有按钮右侧的空白区域。根据用户的选择，单选按钮右侧会显示一个特定菜单。当页面加载时，看起来只有足够的空间用于菜单，但是它们正在加载UNDERNEATH单选按钮而不是右侧。

第二次编辑

这是允许我自动调整div大小的CSS，但是所有内容都是左对齐的（已注释掉某些部分并将display: inline-block和overflow: auto添加到.page ）。

/*#contentContainer { Had to comment this whole section out
    width: 100%;    
}*/

.page 
{
    /*width: 50%;  /*1030px;/*75em;/*83.7em; Needed to comment this attribute as well*/
    display: inline-block;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
}

#main 
{
    height: auto;
    display:block;
    height: auto;
    background-color: white; 
    /*border: 1px solid #999;*/
    border-radius: 5px 10px / 10px;
    -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);

}

Answer 1

您需要将父元素设置为

display: table-cell;
vertical-align: middle;
text-align: center;
#and some kind of height:
height: 350px;

＃page-div to：

display: inline-block;

像这样： http://jsfiddle.net/YA2Ns/1/

Answer 2

不要问我为什么，但是将display:table和margin: 0 auto添加到.page元素有效。我实际上不再需要contentContainer div了。这是最终产品。

<强> CSS

.page 
{
    display: inline-block;
    overflow: auto;
    display: table;
    margin: 0 auto;
}

#main 
{
    height: auto;
    display:block;
    height: auto;
    background-color: white; 
    /*border: 1px solid #999;*/
    border-radius: 5px 10px / 10px;
    -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
#content {
    padding: 20px;
}

footer, 
#footer 
{
    /*background-image: url('Images/TEST2body_bot.png');*/
    /*background-color: #fff;  */  
    background-repeat: no-repeat;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

<强>布局

<body>
    @using Monet.Common
    <div class="page">  
        @Html.Partial("NavBarPartial")
        <section id="main">
            <div id="content">
                @RenderBody()
            </div>
        </section>
    </div>          
    <div id="footer">
        <span style="color: Gray;"></span>
    </div>           
</body>

在div中居中div，并根据内部div使外部div自动调整大小

2 个答案: