創建9圈
回答
那麼,作爲一個純CSS的解決方案,你可以使用vh
Viewport-percentage lengths爲#container
指定視口的高度其尺寸的基礎。
這是我試圖做到這一點:
薩斯版本:
html { height: 100%; }
body {
height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden; /* Hide the vertical overflow */
}
#container {
max-width: 90vh; /* = 90% of the height of initial containing block */
max-height: 90vh;
margin: 5vh auto;
position: relative;
background-color: gold;
}
#main {
height: 100%;
width: 100%;
.row {
width: 100%;
height: 33.33%;
font: 0/0 a; /* Hide the white space between inline(-block) elements */
.circle {
display: inline-block;
vertical-align: middle;
margin: 3%;
width: 27.33%;
padding-bottom: 27.33%;
background-color: #333;
border-radius: 50%;
}
}
}
WORKING DEMO。 (水平和垂直調整面板/窗口的大小)
我應該注意它沒有完全的browser support,但它適用於大多數現代Web瀏覽器。
非常感謝,這真是太棒了,你甚至可以固定圈子尺寸並在它們之間增加一些空間。這會給我一個很好的起點去做我需要做的事情。 – bradfields
http://jsfiddle.net/Tzx2E/或http://jsfiddle.net/ZkD5v/
HTML:
<div id="grid">
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
CSS:
.circle{border:1px solid black;border-radius:50%;width:33%;float:left;margin:0;padding:0;}
.row{clear:left;}
或者:
JS:
$('.circle').height($('.circle').width());
或者:
CSS:
.circle{padding-top:33%;}
該OP不要求JS解決方案。 – cimmanon
他沒有明確表示不使用JS。雖然您提到的填充解決方案可能會更好,但您無法將內容添加到圈子中。編輯... –
@cimmanon更好? –
- 1. Java:創建圈子
- 2. 創建加載圈
- 3. svg創建圈子
- 4. HTML,CSS,Javascript在圈內創建圈子
- 5. 圈在圈淡出,創建目標
- 6. 創建於Odoo 9
- 7. 如何在DirectX 9中創建Cubemap 9
- 8. CGContextAddArc:如何創建圈子?
- 9. 創建一個脈動圈
- 10. Kentico 9表單創建
- 11. 創建響應div 16:9
- 12. 在directx中繪製一個圓圈9
- 13. 我創建的Google地圖V3圈子和圈子不匹配
- 14. 創建通過線連接到一個主圈的CSS圈
- 15. 創建一個由小圓圈組成的擴展圓圈
- 16. 在Android中的另一個圈內創建圈子
- 17. 如何在WPF中創建一個帶圓圈的圓圈?
- 18. 在反應本地創建css圈
- 19. 創建多個進度圈d3.js
- 20. 如何在css div中創建圈子?
- 21. XNA,用紋理創建一個blob'ish圈?
- 22. 創建光圈/景深效果
- 23. 用文字創建CSS3圓圈
- 24. 創建自定義樣式餅圈
- 25. 如何在Box2D中創建「圈子」?
- 26. 用瓦片創建一個圓圈
- 27. three.js - 創建可拖動的圈子
- 28. 創建3D餅圖或3D圈
- 29. 在C中連續創建圓圈#
- 30. 在ActionScript 3中創建10個圓圈
難以響應時,它被硬編碼到1000px寬。這是你要找的東西:http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio – cimmanon