创建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