css包含不同大小的圓圈的正方形表格

我想用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>

我想打一排圓形，含最大的圓圈，這將有等於半徑的平方，然後半徑的寬度/高度一半的首個TD標籤2,3,4將會變得更小。

我試圖把一個div標籤，給他們的大小/邊界半徑我想要的TD標籤內，但他們剛剛被壓扁

這個我也試過做的div的表沒有「填充頂前：td標籤上有20％的位，但是當我調整瀏覽器的大小時，我的圈子變成了省略號。

我嘗試使用水平列表使li元素顯示：inline-block;但這並沒有奏效（當我調整瀏覽器大小時，圈子四處亂彈，並沒有連續保留）

可以使用表標籤來完成我想要做的事嗎？
我應該再次考慮水平列表嗎？

我看到一些與我的類似的問題，但不能完全回答我的問題。

來源

2017-04-11 Jozurcrunch

在這樣的應用程序，使用列表或簡單的標記中使用表不是一個好習慣。 – hcheung

你的意思是這樣的嗎？

.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的寬度，它們是父寬度的20％，因爲它們中有5個。

flex: 1;在這種情況下（5格）幾乎可以說設置寬度爲20％，高度爲寬度的20％是以像素爲單位。（因爲我們已經將calc的高度設置爲父親的高度）

關於使用CSS技巧的calc和flexbox的更多信息。

如果您關注的是舊版瀏覽器（或任何IE），請務必在caniuse.com上檢查calc和flex的兼容性。

小提琴

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

來源

2017-04-11 03:37:58

這工作很好。有幾行我沒有見過，所以我會仔細研究你的代碼。非常感謝 – Jozurcrunch

@Jozurcrunch我添加了一些信息來幫助你更容易理解事情。 –

這裏是我的thougths： 1）是的，但沒有..來實現它是你重置了大量的預定義的表格的樣式的方式。最後，它不會是一個表格，所以使用這個標籤將是無用的，並且語義上標籤表格不會爲您的想法提供太多內容，所以，是的，您可能會迫使css完成它，但它可能需要您這麼多時間，它會變得毫無價值。

2）是的，但實際上是一樣的。我不知道你想做什麼，但如果你希望我只有5個圈子比其他人小，即使是李標籤也需要一個毫無價值的努力。也許你可以考慮一個「圈子列表」，但直到現在，它沒有太大意義。

結論：

使用更少的預定義樣式的更簡單的標籤。你可以完全做到這一點，甚至一切都使用正確的顯示（flex建議）居中，並考慮權利寬度。這個練習在我看來會更有價值

來源

2017-04-11 03:56:25 DsEsteban

我不知道爲什麼我解決了表或列表標籤。我想我認爲他們會讓事情變得更容易，但他們已經變得相當沉重，至少就這一任務而言。感謝您的建議 – Jozurcrunch

css包含不同大小的圓圈的正方形表格

回答

相關問題