0

埋め込みメディア(この場合はビデオ)の下にテキストを表示する必要があります。テキストをビデオに右揃えにします。

レイアウトは流動的である必要があるため、これを行う方法がわかりません。一部の動画は他の動画よりも幅が広くなります。

現在、テキストは折り返しのdivに右揃えになっています。

これが私がこれまでに持っているもののフィドルですhttp://jsfiddle.net/thwackukulele/2N6a9/

「YouTubeチャンネルでもっと動画を見る」というテキストを動画の右端に合わせてください。

助けてくれてありがとう!

4

3 に答える 3

0

テキストをビデオの下に配置し、ビデオの右端に右揃えにする場合は、<h4 class = "caption">要素を「framewrap」要素内に配置してから、次のスタイルを適用します。

h4.caption { margin:auto; text-align:right; width:640px }

これがお役に立てば幸いです。

ps:幅の異なる動画の場合、JavaScriptで検出し、それに応じてh4.captionの幅を設定するのが最善の方法だと思います。これは、jqueryディメンションパッケージを使用して比較的簡単に行うことができます。プレーンなhtml/cssで箱から出してこれを行うには、知識が不足しています;)

于 2012-03-07T21:33:23.907 に答える
0

動画の幅はさまざまですが、コンテンツユニットに設定されている960pxよりも幅が広くなることはありませんか?

content-unitがすべてを中央に配置している場合は、framewrapをinline-blockに設定します。これにより、コンテンツ(ここではビデオ)にシュリンクラップされ、content-unitにtext-align:centerが設定されている場合、インラインブロックフレームラップは中央に配置されます(幅に関係なく)。 )。現在、その幅は最も広いコンテンツ(ここではiframe、インライン要素)に制限されているため、h4はtext-align rightに設定でき、テキストはframewrapの右側に制限する必要があります。ブロックh4は引き続きフレームラップが何であれ、100%に拡張します。

ああ、そこにはたくさんのポジショニングとマージンがあり、彼らが何をしているのかわからないので、このコードが本当にあなたの問題を解決するとは思わないが...JSFiddleを見るのはスクリーン拡大鏡を通して見るようなものだ。楽しいものhttp://jsfiddle.net/2N6a9/2/キャプションがどのようにラップされるかを確認できるように、コンテンツユニットを青、フレームラップを赤にしました。テキストをもう少し左に移動したい場合は、h4に少し右のパディングを追加できます。

ああ、私はIE6,7などのコードを追加しませんでした。それらをサポートしている場合は、inline-block宣言のに表示するようにframewrapを設定することを忘れないでください:inline 。

編集2:Facebookのものを左に戻さなかった

于 2012-03-07T21:35:41.823 に答える
0

http://jsfiddle.net/RPTgB/ それがあなたが探しているものだと思います。.innerframe DIVを作成し、左右のマージンをautoに設定し、幅をiframeと同じに設定しました。

<div class="innerframe">
<iframe width="640" height="480" src="http://www.youtube.com/embed/D35uQCtr4EY" frameborder="0" allowfullscreen class="frame"></iframe>
<h4 class="caption"><a>Watch more videos on our YouTube Channel</a></h4>
</div>

そしてcssはちょうどでした

.innerframe {
width:640px;
margin-left: auto;
margin-right: auto;
}

それがあなたが探していたものであったことを願っています。

于 2012-03-07T21:44:57.357 に答える