gpt4 book ai didi

html - 在一个 div 中居中一个 div,并根据内部 div 使外部 div 自动调整大小

转载 作者:行者123 更新时间:2023-11-28 11:45:43 31 4
gpt4 key购买 nike

现在我可以将容器 div 的大小自动调整到内部 div,或者我可以将整个东西居中...但我不知道如何同时进行这两项操作。

下面是我拥有的 CSS/布局。现在 pagemain 元素都居中,但如果内容超过一定大小,它就会越过边界,而不会调整任何一个元素的大小。

布局

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

编辑

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

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

第二次编辑

这是允许我自动调整 div 大小的 CSS,但是所有内容都是左对齐的(注释掉某些部分并添加 display: inline-blockoverflow: 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);

}

最佳答案

需要设置父元素为

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

#page-div 到:

display: inline-block;

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

关于html - 在一个 div 中居中一个 div,并根据内部 div 使外部 div 自动调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20506761/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com