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

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 に答える