两列DIV布局变成一个居中对齐的单列布局

Question

在我的网页中央，有一个ID为center-container的div容器，其中包含两个div：一个视频播放器（在左侧），第二个div（在右侧）是可选的播放列表。在中心容器上下各有另外一个内容。

现在的问题是：如何使视频播放器容器在没有播放列表时自动居中，不影响其他布局。

如图所示:

- Karine

---

你能上传元素的图片吗？ - m.edmondson

你能否添加你当前的HTML/CSS，并可选地创建一个test case？ - thirtydot

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/

- sandeep

---

哇！ :) 为什么在 div class="video" 之前放置了一个向右浮动的 div class="playlist"？请解释一下。 - Karine

因为在我的 CSS 代码中我写了 .playlist + .video，这意味着如果视频在播放列表后面，则应用 float:left；如果没有播放列表，则在视频 div 中应用 margin:0 auto。 - sandeep

这是我也在寻找的一个很好的解决方案。但有一些我不理解的地方。"当播放列表div不存在（未设置）时，视频播放器容器如何到达页面中间"是什么意思？我不明白"(未设置)"是什么意思。如果我删除.playlist类，那么播放列表就会消失，但这只是因为它里面没有内容。如果该DIV中存在某些内容，则仍然可见。是否有一种方法可以使您的代码起作用并仍然在播放列表中拥有内容 - 换句话说，使播放列表内容不可见？ - JonDoeCA

Answer 2

明白了！

http://jsfiddle.net/6y5N4/7/

我一直在使用这个功能！只需从应该是可选的容器（如播放列表）中删除内容，另一个容器就可以自由拉伸而不会出现问题。

- Joseph

---

那么，不拉伸视频播放器容器的大小，而是保持其恒定并将其置于中间呢？ - Karine

@Karine：差不多。浏览器应该先设置正确的浮动div，这样左侧的div就可以被拉伸和适应右侧的div。 - Joseph

@Karine：你可以在左侧div内创建一个具有静态尺寸的包装器div，并使用margin:0 auto将其居中。我会更新我的代码。 - Joseph