11

私はdivを次のように円に変えることができます：

.circle {
 background-color: rgba(0, 0139, 0139, 0.5);
 height: 200px;
 width: 200px;
 -moz-border-radius:50%;
 -webkit-border-radius: 50%;
 border-radius:50%;
}

<div class="circle"></div>
</div>

しかし、私は幅の高さを指定する必要があります：

「折り返しなし」でDIVに3行のテキストを表示したいので、テキストの3つのセグメントのそれぞれに独自の行があり、折り返されません。

これらを円の中心に表示し、テキストの行に合わせて円を拡大したいと思います。

テキスト行はPHPを介してデータベースから取得され、文字の長さが異なります。

問題は、上記の方法が幅/高さが指定されている場合にのみ機能することです。

これは、CSSのみを使用して、パーセンテージを使用して可能ですか、それともJSの回避策が必要ですか？

前もって感謝します。

4

4 に答える 4

5

いくつかの注意点がある純粋なCSSソリューション

このフィドルは、cssのみを使用したソリューションを示しています。これは、1行のテキストをborder-radius使用する最新のブラウザー（とにかく必要なIE9 +）で問題なく動作します（私は思います）。警告は次のとおりです。

  1. ピンクの「円」でわかるように、テキストはすべて単一の要素に含まれている必要があります（ピンクのように複数のスパンではありません）。それは大きな問題ではありません。
  2. borderあらゆる種類の「パディング」を取得するには、spanセットに「パディング」サイズの透明部分を配置する必要があります。円の内側に境界線が必要になる可能性は低いため、これも通常は大きな問題にはなりません。
  3. シアンの円のcssでわかるように、複数行のテキストが予想される場合（または、私の場合はaによって強制される場合max-width）、cssformargin-topおよびtopプロパティはテキスト行の数に応じて設定する必要があります。これは、アプリケーションによっては問題になる可能性があります。スタックバージョンでは、IE9overflow: autoを正しくサイズ設定するために設定する必要がありました。
  4. 表示領域を狭くすると赤い円でわかるように、white-space: nowrapが設定されておらず、円が1行のテキストを折り返し始めると、円の排卵歪みが発生します。

各Webデザイナーは、このソリューションの制限を説明できるかどうかを判断する必要があります。そうでない場合は、rgthreeによってここに投稿されたjavascriptソリューションがうまく機能するはずです。しかし、単一の行（または私のシアンの円のようにいくつかの設定された行数）のみが予想される場合、このcssソリューションはうまく機能するはずです。

于 2012-04-02T20:47:06.750 に答える
1

あなたがする必要があるのはあなたの高さと幅をパディングとディスプレイインラインブロックに置き換えることです。参照： http： //jsfiddle.net/6mzP7/

.circle {
   background-color: rgba(0, 0139, 0139, 0.5);
   padding: 200px;
   display: inline-block;
   -moz-border-radius:50%;
   -webkit-border-radius: 50%;
   border-radius:50%; 
}

​&lt;div class="circle"></div>

HTMLは同じままでかまいません。

于 2012-04-02T18:42:53.047 に答える
1

CSSだけでやりたいことができるとは思いません。私は問題のスクリプト化された解決策にひびを入れました...

CSS：

.circle {
 background-color: rgba(0, 0139, 0139, 0.5);
 -moz-border-radius:50%;
 -webkit-border-radius: 50%;
 border-radius:50%;
 padding:10px;
}
.circle span {
white-space: nowrap;
}
.circle div {
position:relative;
top:0;
left:0;
}

HTML：

<div class="circle">
    <div>
        <span>this is some text</span>
        <span>this is some more text</span>
        <span>this is text</span>
    </div>
</div>

スクリプト：

$(function() {
    var widest = 0;
    $('.circle span').each(function(){
        thisWidth = $(this).innerWidth()
        if (thisWidth > widest) {
            widest = thisWidth;
            };
    });
    $('.circle').css('width',widest).css('height',widest);
    $('.circle div').css('top',(widest - $('.circle div').innerHeight())/2);
});

編集：私はこの提案のフィドルを作成しました：http：//jsfiddle.net/4m2ZZ/

于 2012-04-02T18:43:56.420 に答える
0

編集：私はあなたの質問を間違えました。最高の幅を最高の値に割り当て、コンテンツが中央に配置されていることを確認するには、Javascriptが必要です。

このJSFiddleの方法は次のとおりです。http：//jsfiddle.net/rgthree/K4Kpw/

<div class="circle">
    <div>
        <span>This is a line</span>
        <span>This is yet another line!</span>
        <span>Last Line!</span>
    </div>
</div>​

CSS：

.circle {
    position:relative;
    background-color: rgba(0, 0139, 0139, 0.5);
    padding:10px;
    -moz-border-radius:50%;
    -webkit-border-radius: 50%;
    border-radius:50%;
}
.circle > div{
    position:absolute;
    top:50%;
    left:50%;
}

JQuery：

$('.circle > div').each(function(){
    var h, w, max;
    w = $(this).width();
    h = $(this).height();
    max = w > h ? w : h;
    $(this).css('margin-left', -parseInt(w/2,10));
    $(this).css('margin-top', -parseInt(h/2,10));
    $(this).parent().width(max);
    $(this).parent().height(max);
});​
于 2012-04-02T18:02:34.453 に答える