14

HTMLとCSSを使用して流動的な円を作成しようとしています。ほぼ完成ですが、流動的で中身がダイナミックであるため、形が円形から楕円形などに変化しています。

body {
  position: relative;
}
.notify {
  position: absolute;
  top: 100%;
  left: 20%;
  background: red;
  border: 2px solid white;
  border-radius: 50%;
  text-align: center;
}
.notify > div {
  padding: 20px;
}
<div class="notify">
  <div>
    12
  </div>
</div>

手伝ってくれませんか。

4

6 に答える 6

8

使用border-radius:50%しているハックは、丸みを帯びた角が適用される前にが正方形であると想定します。<div>そうでない場合、あなたが指摘したように、円ではなく楕円形になります。

したがって、コンテンツが拡大しても円を円形のままにしておきたい場合は、幅に合わせて高さを動的に調整する必要があります。これを実現するには、おそらくJavascriptを使用する必要があります。

border-radiusまた、古いバージョンのIEではサポートされていないため、IE6、IE7、またはIE8を使用しているユーザーにはサークルがまったく表示されないことに注意してください。（ CSS3Pieと呼ばれるハックがありますが）

もちろん、を調整するheightと、要素が垂直方向により多くのスペースを占めるようになるという副作用があります。これはあなたが望むものではないかもしれません。内容に関係なく、円を同じサイズにしたい場合がありますか？この場合、円の高さと幅を固定し、position:absolute;親のサイズに影響を与えないようにコンテンツを指定する必要があります。

border-radiusハックを使用して円を作成する代わりに、 SVGを使用することもできます。SVGは、ほとんどのブラウザに組み込まれているベクターグラフィック形式です。

繰り返しになりますが、注目すべき例外はIE8以前ですが、IEはVMLと呼ばれる代替形式をサポートしています。SVGとVMLの間で変換できるさまざまなスクリプトが存在するため、SVGとJavascriptを使用してクロスブラウザーソリューションを作成できます。

Javascriptがソリューションの一部であることを受け入れる場合は、最初にjavascriptライブラリを使用してそれを描画することができます。これについての私の提案は、実行しているブラウザに応じてSVGまたはVMLグラフィックスを生成するRaphaelです。

お役に立てば幸いです。

于 2011-07-08T12:04:30.760 に答える
5

角が半径50％の正方形をレンダリングするには、両方を設定する必要があります。また、これらの両方の最大値にwidth設定する必要があります。height

これはjQueryで行うことができます。

$(function() {
  var $elem = $(".notify > div");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

ここでコンテンツ（幅と高さの両方）を変更してみてください

于 2011-07-08T12:10:41.373 に答える
2

HTMLとCSSのみを使用した流動的な円の例。質問に対する私のコメントで述べたように、テクニックは私のブログ投稿で説明されています。また、前述のように、Safariは現在、パーセンテージで指定された境界半径ではうまく機能しません。

于 2011-07-08T12:55:51.477 に答える
1

あなたがしたようにJose Rui Santosあなたはあなたの目標を達成することができます。ただし、cssにいくつかの変更を加えます。

からパディングを削除し.notify > div、次のようなスタイルを追加するように：

.notify > div
{    
    display: table-cell;
    vertical-align: middle;
}

.notify次のようにクラスにパディングを追加します。

.notify
{
    position: absolute;
    top: 100%;
    left: 20%;
    background: red;
    border: 2px solid white;
    border-radius: 50%;
    padding: 30px;
    text-align: center;

}

およびJqueryコードJose Rui Santos：

var $elem = $(".notify > div");
var maxSize = Math.max($elem.width(), $elem.height());
$elem.width(maxSize).height(maxSize);

動作するデモを参照してください：http：//jsfiddle.net/2j5Ek/63/

于 2011-07-08T13:16:04.917 に答える
0

高さ/幅を強制する方法が必要です。そうしないと、楕円形になります...可能です！

このhtmlで

<div class="notify">
    <div class="child">
        12334        
    </div>
</div>

このjQueryスクリプトはそれを行う必要があります。

var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px',
    'line-height': cw + 'px'
});
于 2011-07-08T11:55:50.970 に答える
0

設定によって最大の高さと重量を強制するとmax-width:XXpx; max-height:XXpx、仕事ができます。

word-wrap: break-word;単語を壊すためにCSS3を使用する必要があるかもしれないことに注意してください。ブラウザ間の互換性が問題になる可能性があります。

于 2011-07-08T11:59:03.760 に答える