Question

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

我试图将两个左右浮动的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;   
}

Answer 1

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

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

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

在上面，只要容器足够宽，两个<div>将彼此相邻，一旦容器太小，它们将在另一个之前显示一个，每个都在容器中心

Answer 2

Could this be what you're looking for? Click here...

如果我理解了您的问题，那么您正试图将<div>居中，其中还有2位<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;
}

中心2在容器中div（浮动左，右）

2 个答案: