2017-04-11 11 views
2

最大のものから最小のものまでcss:5個の円を使って描画したい。ブラウザのウィンドウを縮小しても、5つのサークルがページの幅を占めるようにします。 css異なるサイズの円を含む四角形のテーブル

.main-circle-block { 
 
    border: 2px solid blue; 
 
} 
 

 
.main-circle-block table { 
 
    width: 100%; 
 
    border: 2px solid red; 
 
} 
 

 
.main-circle-block td { 
 
    border: 2px solid green; 
 
    //border-radius: 50% (just to make them into circles) 
 
    width: 20%; 
 
    padding-top: 20%; 
 
}
<div class="main-circle-block inside-main"> 
 
    <table> 
 
    <thead> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>
Iは、正方形、次いで、半径の半分の幅/高さに等しい半径を有するであろう最大の円を含む第一のTDタグと列円を作りたいです2、3、4 & 5が連続的に小さくなる。

私は彼らに私は、TDタグ内たかったが、彼らはちょうど私も「パディングトップなしのdivのテーブルを作ってみました。この前

を押しつぶしてしまっサイズ/ボーダー半径を与え、divタグを入れてみました:20% "のタグが付いていますが、ブラウザのサイズを変更すると円が楕円に変わります。

li要素を表示する水平リストを使ってみました:inline-block;しかし、それは動作しませんでした(私はブラウザのサイズを変更したときに、サークルが周りにポップし、連続していない)

  1. テーブルタグを使って何をしたいですか?
  2. もう一度水平リストを考慮する必要がありますか?

私は似たような質問をしますが、私の質問に正確には答えません。

+0

このようなアプリケーションでは、テーブルを使用するか、リストを使用するか、単に5つの 'タグを使用するのは良い方法ではありません。 – hcheung

答えて

0

これはどういう意味ですか?

.container { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.square { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex: 1; 
 
    background-color: black; 
 
    height: calc(100vw * .20); 
 
} 
 
.circle { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 100%; height: 100%; 
 
    border-radius: 100%; 
 
    background-color: red; 
 
} 
 
.container div:nth-child(1) .circle {width: 90%; height: 90%;} 
 
.container div:nth-child(2) .circle {width: 70%; height: 70%;} 
 
.container div:nth-child(3) .circle {width: 50%; height: 50%;} 
 
.container div:nth-child(4) .circle {width: 30%; height: 30%;} 
 
.container div:nth-child(5) .circle {width: 10%; height: 10%;}
<div class="container"> 
 
    <div class="square"><div class="circle"></div></div> 
 
    <div class="square"><div class="circle"></div></div> 
 
    <div class="square"><div class="circle"></div></div> 
 
    <div class="square"><div class="circle"></div></div> 
 
    <div class="square"><div class="circle"></div></div> 
 
</div>

それは我々がこのコード行を使用していた彼らの幅とまったく同じ高さの正方形を保つために

のしくみ

...

height: calc(100vw * .20);

各01の高さを作ることですブラウザのビューポートの幅の20%(コンテンツ領域がビューポートの幅の100%の場合)は、.squareの幅に一致します。

flex: 1;この場合(5divs)は、幅が20%、幅が20%のピクセルを単位とした設定とほぼ同じです。 (先ほどのcalcで親の高さに高さを設定したので)

詳細については、CSS Tricksのcalcflexboxを参照してください。

古いブラウザ(またはIEなど)を気にする場合は、caniuse.comのcalcflexの互換性を確認してください。ここで

フィドル

https://jsfiddle.net/Hastig/dehuv652/

+0

これは美しく動作します。私が以前見たことがないいくつかの行がありますので、あなたのコードを慎重に研究します。ありがとうございました – Jozurcrunch

+0

@ Jozurcrunch私はあなたが少し簡単に物事を理解するためにいくつかの情報を追加しました。 –

0

私thougthsです: 1)はい、ない...それを達成するための方法は、事前定義された表のスタイルの多くを設定解除されます。最後に、それはテーブルではないので、このタグを使用することは無意味であり、意味的にタグテーブルはあなたのアイデアをあまり提供しないので、CSSを強制的に終了させるかもしれませんが、それは無益なほどの時間です。

2)はい、ただし実質的に同じです。私はあなたが何をしようとしているのか知りませんが、私はただ5つの円をそれぞれの行よりも小さくしたいと望むならば、liタグでさえ無駄な努力を必要とします。たぶんあなたは「サークルのリスト」について考えることができましたが、今まではあまり意味がありません。

結論:

あまり定義されていないスタイルのより単純なタグを使用してください。これを完璧に行うことができます。右ディスプレイ(フレックスの提案)を使用してすべてのものを中央に置き、権利の幅を考えます。この練習は私の意見ではるかに価値があるでしょう

+0

なぜ私はテーブルやリストのタグに決まったのかわかりません。私は彼らがそれをもっと楽にすると思ったと思うが、少なくともこの仕事が懸念される限り、彼らはかなり負担になっている。アドバイスありがとう – Jozurcrunch

関連する問題