css - 两列 DIV 布局变为一列居中对齐

Question

在我的网页中央，我有一个 ID 为 center-container 的 div，其中包含 2 个 div:一个用于视频播放器(左侧)，第二个(右侧)用于播放列表等可选内容。在 center-container div 的上方和下方我还有另一个内容。

现在是问题。当播放列表 div 不存在(未设置)时，如何在不中断剩余布局的情况下使我的视频播放器容器到达页面中间。

Answer 1

您可以像这样使用更少且更简单的代码来做到这一点:

.playlist{
    width:100px;
    height:100px;
    float:right;
    background:blue;
    margin-right:20px;
}
.playlist + .video{
    width:200px;
    height:100px;
    margin-left:20px;
    background:green;
    float:left;
}
.video{
    width:200px;
    height:100px;
    margin:0 auto;
    background:green;
}

http://jsfiddle.net/qcTSt/