2

我尝试了在这个网站上找到的多种方法，但似乎没有任何帮助。

我试图将 2 个左右浮动的 div 居中在一个宽度为 100% 的容器中。

CSS 片段：

#body-container {
    background: none;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

    #body-inner {
    float: left;
    width: 550px;
    left: 325px;
    margin: 0 auto;
    background: none;
    padding-top: 3%;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}

#bodybox {
    margin: 0 auto;
    width: 200px;
    height: 100%;
    right: 325px;
    background: none;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;   
}
4

2 回答 2

1

您需要对浮动的工作原理进行一些研究，因为我认为您的想法是错误的。div一左一右浮动，没有办法让它们居中，因​​为它们是浮动的。除非元素被定位（绝对的、固定的或具有某些含义的相对），否则leftandright属性不起作用。此外，您似乎正在尝试使 的右边缘#bodybox与 的左边缘对齐#body-inner。这不起作用，因为该right属性是从屏幕的右边缘计算的，而不是从左边缘计算的。此外，您将固定框尺寸与流体容器宽度混合。这很好，如果你考虑到它们碰撞时会发生什么。

如果您只是想将两者对齐<div>，请以页面为中心。在这种情况下，inline-block很可能是你的朋友。关于空白、字体大小、内容顺序等有许多影响和解决方法，但基本上你会这样做：

#body-container {
    width: 100%;
    text-align: center;
}
#body-inner {
    width: 550px;
}
#bodybox {
    width: 200px;
}

在上面，<div>只要容器足够宽，两个 s 就会并排放置，一旦容器太小，它们就会一个接一个地显示，每个都位于容器的中心。

于 2013-05-07T21:41:41.903 回答
0

这可能是你要找的吗？点击这里...

如果我理解你的问题，你正试图集中一个<div>有两个<div>父母的中心......

代码片段：

#body-container {
    background: none;
    height: 100%;
    width: 100%;
    /*margin: 0 auto;*/

    /* testing border and height, could be deleted */
    border: solid;
    height: 500px;
}
#body-inner {    
    width: 550px;
    margin: 0 auto;
    background: none;
    padding-top: 3%;
    padding-left: 10px;
    padding-right: 10px;
    /*border-left: 1px solid #000000;
    border-right: 1px solid #000000;*/

    /* testing border and height, could be deleted */
    border: solid;
    height: 400px;
}
#bodybox {
    margin: 0 auto;
    width: 200px;
    height: 100%;
    /*right: 325px;*/
    background: none;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;

    /* testing border and height, could be deleted */
    border: solid;
    height: 400px;
}
于 2013-05-07T21:08:24.020 回答