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%;
}

请参阅小提琴：http://jsfiddle.net/NkeLc/1/

Answer 2

如果您正在寻找快速解决方法，可以重新组织以围绕视频包装<p>，如下所示：http://jsfiddle.net/zLjHn/4/

我认为段落和视频正在争夺“灵活性”。好像你希望视频根据高度弯曲，然后段落随可用宽度弯曲。

我认为你可以通过引导视频并将附近的段落包裹起来来实现正确的弹性优先级。如附带小提示所示。

Answer 3

尝试修改 CSS ，如下所示：

.left {
    float:left;
    max-width:20%;
    position: relative;
    min-width: 100px;
}

演示：http://jsfiddle.net/4yEmJ/

CSS：相对于可调整大小的100％高度方块，一列的宽度是多少？

3 个答案: