6

状況: テンプレートに、コンテンツからオーバーフローする固定画像があります。固定のため、画像が文字からはみ出すことがあります。これを修正してfloat、コンテンツ div 内にあるかのように、テキストを画像の周りに配置する方法はありますか。

html-exampleを参照してください。

CSS の回答が優先されます。Javascript/jQuery の回答は許容されます。

追加の詳細:

  • 内容はランダムです。長いもの、短いもの、画像を含むもの、html を含むものがあります。
  • は#cloud、どのコンテンツでも同じ位置にとどまる必要があります。

この問題は、#cloud を下位の z-index レイヤーに配置することで解決されるため、ライブ Web サイトでは表示されなくなりました。

4

5 に答える 5

4

あなたが探しているのは、CSS Exclusions and Shapesと呼ばれるものです。これは比較的新しく、ブラウザで広くサポートされていません。CSS Exclusions に関するこの素晴らしい記事にも興味があるかもしれません。

于 2012-08-22T07:53:45.137 に答える
1

わかったら

( http://jsfiddle.net/VG4Ef/1/ )

body{
    background-color: #8888FF;
}

#container{
    float:left;
    width: 400px;
    background-color:#CFCFFF;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    margin-right:10px;
}

#content{
    background-color: #FFDFDF;
    width: 340px;
    padding: 5px;
    position:relative;
    float:left:
}

#cloud{
    width: 130px;
    height: 100px;
    background-color:#FFF;
    float:right;
    top: 120px;
    text-align: center;
    line-height: 100px;
    color: #999;
    font-size: 12px;
    float:right;
    display:inline-block;
    margin-top:-100px;
    margin-right: -100px;
    background: yellow;
}
​
于 2012-08-23T04:06:52.873 に答える
1

これがあなたが探しているものだと思います：http://jsfiddle.net/pG3AG/

クラウド div は、絶対的な配置ではなく、相対的に配置する必要がありました。これは、絶対的な配置により、要素が他の要素 (この場合の content 要素など) に対してではなく、ビューポートに従って配置されるためです。また、行内の「未完成」の単語の最後の文字がクラウド ボックスの後ろにならないように、ボックスの right:20px の位置を減らすか削除する必要がありました。

これがうまくいくことを願っています！

于 2012-08-18T11:04:18.470 に答える
1

JQueryを使用したJS Fiddleの例で何とか解決できました（申し訳ありませんが、CSSソリューションを思い付くことができませんでした）

var _top = $('#cloud').offset().top;
var _left = $('#cloud').offset().left;
var _height = $('#cloud').height();

var _contentTop = $('#content').offset().top;
var _contentLeft = $('#content').offset().left;
var _contentWidth = $('#content').width();

var _floatWidth = (_contentLeft+_contentWidth)-_left
    var _floatTop = _top-_contentTop;

$('#content').prepend('<div id="virtual" style="float:right">&nbsp;</div>');
$('#virtual').css('margin-top',_floatTop).css('width',_floatWidth).css('height',_height);

基本的に、雲の位置にフローティングされた非表示の div を追加して、雲が前景に表示される場所にテキストを押し込んで、コンテンツに収まるようにします。

リンク先の Web サイトのコンテンツを見ると、div を周囲のコンテナーに移動して数字を少しいじる必要があるかもしれませんが、ここでは多かれ少なかれ機能しますhttp://jsfiddle.net/cLnz6/58/

于 2012-08-21T15:24:55.177 に答える
0

個人的には、クラウドを少し縮小することです。そのクラウドは、それを行うのに十分な大きさです。次に、これらの雲を背景が透明な Fixed Div に配置して、画面にとどまり、浮かんでいるように見せます。

2番目のこと。最初のオプションがない場合。Z-index 雲のその小さな先端には何もなく、背景の他の雲もフィードの背後にあるように変更することで、雲をメイン フィードの背後に配置します。の雲がフィードの後ろにぶら下がっています。

于 2012-08-23T14:20:13.930 に答える