Question

我有一个带有以下属性的div：

.videosHolder {
width:970px;
padding:5px;
float:left;
}

现在我有另一个具有属性的div：

.rightbar{
    width:222px;
    padding-bottom:10px;
    float:right;
    margin-top:10px;
    margin-right: 10px;
}

所以我的第一个是漂浮：左边，它没关系，第二个漂浮正确，但我想在.videosHolder的空间之后居中，这个空间取决于屏幕分辨率。我的意思是如果我的屏幕分辨率是1300px而第一个div有970px那么我必须将第二个div放在330px的空间中。所以330px - 222px = 108px但如果我的分辨率为1600px，这个108px空间将是一个不同的数字..

谢谢！

Answer 1

你可以做这样的事情

HTML：

<div id="right">
    <div id="right-center">
        test test
    </div>
</div>

<div id="left">
    test test
</div>

CSS：

#left 
{
    width: 100px; /* You can change this to 970px */
    background-color: red;
}

#right 
{
    position: absolute;
    left: 100px; /* You can change this to 970px */
    right: 0;

}

#right-center 
{
    margin: 0 auto;
    width: 80px; /* You can change this to 222px */
    background-color: blue;
}

查看实际操作：http://jsfiddle.net/8QYfa/3/

Answer 2

在rightbar-inner内添加一个类rightbar的div，给它一个宽度并以div为中心。

然后只用类videosHolder浮动你的div。并将margin-right div的rightbar设置为等于width的{{1}}（如果您使用LESS或SASS之类的编译器，则可以将宽度保存在变量中用它来设置宽度和边距 - 右）

请参阅此示例。我使div的宽度变小，因此更容易测试。如果您调整大小（不是浏览器而是页面中间的veritcal行），您可以看到右侧栏正在调整大小，而右侧栏保持居中。

http://jsfiddle.net/gwHC2/1/

以不同的分辨率居中div

2 个答案: