css里怎么使元素按高平均分布（或者用别的方法）

html-css04

css里怎么使元素按高平均分布（或者用别的方法）,第1张

用百分比来做，比如html如下

<div class="demo">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

css如下

.demo{width: 1000pxheight: 300px}

.box{width: 100%height: 33.3%}

效果就是demo被box均分为3个宽1000高100的三个块，当然，3个33.3%是不能完全达到百分百，但在显示界面基本看不出什么了

<style>

.zh-circle{position: relativewidth: 240pxheight: 240pxborder-radius: 50%border: 1px solid #f00box-sizing: border-boxmargin: 100px auto 0}.zh-circle li{position: absolutez-index: 2left: 50%top: 0width: 40pxheight: 40pxmargin: -20px 0 0 -20pxborder: 1px solid #f00border-radius: 50%box-sizing: border-boxlist-style: nonetransform-origin: 20px 140px}</style><ul class="zh-circle">

<!-- <li></li>--></ul><script>

var liSize = 10,

li = '' for(var i=0i<liSizei++) {

li += '<li style="transform: rotate('+360/liSize*i+'deg)"></li>'

}

$('.zh-circle').html(li)</script>

描述一下：

1、transform-origin: x y z设置旋转中心点，示例中为什么是20px 140px呢，正常情况下是0 120px的，但前端做了margin向上向左偏移20px，所以这里需要加回来。

2、360/liSize*i 设置叠加旋转角度