0

这个问题有点难，所以解释一下，所以我创建了一个 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>

谢谢！

4

3 回答 3

2

听起来很禁忌，你的答案是表格布局。一个包含两个单元格的表格行展示了您正在寻找的布局行为，而无需任何 javascript。如果您关心语义 HTML（并且您应该关心），您可以使用display:table-cell;和display:table-row;在您的 css 中完成此操作。

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

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

于 2013-05-19T18:23:57.617 回答
1

如果您正在寻找快速修复，您可以<p>像这样重新组织以环绕视频：​​http://jsfiddle.net/zLjHn/4/

我相信段落和视频都在争夺“灵活性”。似乎您希望视频根据高度弯曲，然后段落以可用宽度弯曲。

我认为您可以通过以视频开头并将段落包裹在其周围作为附加的小提琴显示来实现正确的弹性优先级。

于 2013-05-19T17:14:06.670 回答
0

尝试修改您的CSS如下：

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

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

于 2013-05-19T16:48:24.280 回答