CSS:相对于可调整大小的 100% 高度方 block 的一列宽度？

Question

这个问题有点难，所以解释一下，所以我创建了一个 jsfiddle:

http://jsfiddle.net/zLjHn/ (或查看下面的 HTML/CSS)

基本上，我想要一个方形视频，它位于屏幕右侧，高度为 100%，左侧栏填充剩余的可用屏幕空间。我已经在这个问题上工作了几个小时，所以我们将不胜感激!

编辑:左栏将包含许多段落/图像，这些段落/图像将以可用空间为中心(不仅仅是示例代码所示的单个段落。

CSS:

.profile_page {
    width: 100%;
    height: 100%;
    position: absolute;
}
.left {
    float:left;
    width: 100%;
    position: relative;
}
video {
    top: 0;
    right: 0;
    border: 1px solid red;
    float: right;
    height: 100%;
    position: absolute;
    max-width: 80%;
}

HTML:

<div class="profile_page">
    <div class="left">
        <p>This paragraph's width should adjust according to the videos width.</p>
    </div>

    <video src="http://stream.flowplayer.org/trains/640x360.mp4" /> 
</div>

谢谢!

Answer 1

这听起来很忌讳，您的答案是表格布局。两个单元格的表格行展示了您正在寻找的布局行为，无需任何 javascript。如果您关心语义 HTML(您应该关心)，您可以在您的 css 中使用 display:table-cell; 和 display:table-row; 来实现。

这将限制正确显示您的布局的浏览器。

<div class="profile_page">
    <div class="left">
        <p>This paragraph's width should adjust according to the videos width.</p>
    </div>
    <div class="right">
        <video src="http://stream.flowplayer.org/trains/640x360.mp4" /> 
    </div>
</div>

还有风格...

.profile_page {
    width: 100%;
    height: 100%;
    position: absolute;
    display:table-row;
}
.left {
    min-width: 100px;
    display:table-cell;
    border:1px solid green;
    vertical-align:top;
}
.right
{
    display:table-cell;
    border:1px solid blue;
    max-width:80%;
    min-width:300px;
}
video {
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

参见 fiddle :http://jsfiddle.net/NkeLc/1/