两列 DIV 布局变为一列中心对齐

Posted 2023-02-23

【中文标题】两列 DIV 布局变为一列中心对齐

【英文标题】：Two column DIV layout becomes one column center aligned

【发布时间】：2012-01-02 09:40:19

【问题描述】：

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

现在是问题。当播放列表 div 不存在（未设置）时，如何使我的视频播放器容器到达页面中间而不影响剩余布局。

【问题讨论】：

你能上传一张元素的照片吗？

你能添加你当前的 html/CSS 并选择创建一个test case吗？

【参考方案1】：

知道了！

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

一直在用这个！只需从容器中删除应该是可选的内容（如播放列表），另一个容器应该可以毫无问题地伸展。

【讨论】：

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

@Karine：有点。浏览器应该先设置右浮动 div，这样左 div 才能伸缩并适应右 div。

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

【参考方案2】：

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

.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/

【讨论】：

哇！ :) 只需解释一下为什么将浮动到右侧的 div class="playlist" 放在 div class="video" 之前？

因为在我的 css 代码中我说 .playlist + .video 这意味着如果播放列表之后的视频然后应用 float:left 如果没有播放列表则应用 margin: 0 auto;在视频 div 中。

这是我也在寻找的一个很好的解决方案。不过有些东西我不明白。 “...视频播放器容器在播放列表 div 不存在（未设置）时到达页面中间”是什么意思。我不明白“（未设置）”是什么意思。如果我删除 .playlist 类，那么播放列表就会消失，但这只是因为其中没有内容。如果该 DIV 中存在某些内容，它仍然是可见的。有没有办法让您的代码正常工作并且播放列表中仍然有内容 - 换句话说，播放列表内容不可见？