<head>
<title>平分秋色</title>
<style type="text/css">
.div1
{
width:90px
float:left
}
.div2
{
width:80px
float:left
}
div
{
border:1px solid #EEEEEE
}
</style>
<script type="text/javascript">
window.onload = function () {
rePointAll()
}
function rePointAll() {
rePoint("objElement", 0)
rePoint("objElement2", 0)
rePoint("objElement3", 90)//指定每个DIV的宽度
rePoint("td1", 0)
rePoint("td2", 80)//CSS样式指定的属性.style.width无法获取，所以要指定宽度
}
//指定间距，id:容器标签ID，w为间距、为0时取第一个元素的宽度值
function rePoint(id, w) {
var objElement = document.getElementById(id)//获取容器
var divs = objElement.getElementsByTagName("div")//获取其下元素
if (divs.length == 0) {//没有元素则结束
return
}
var width = w
if (width == 0) {//如果不指定元素宽度，去第一个元素宽度
//获取宽度，并正则去掉"px"，不区分大小写，兼容措施
width = divs[0].style.width.replace(/px/i, "")
}
//间距 = (容器宽度 - 元素宽度 * 元素数量) / (元素数量 - 1)
var marginLeftIndex = parseInt((objElement.offsetWidth - (parseInt(width) * divs.length)) / (divs.length - 1))
if (marginLeftIndex <0) { //间距小于0时，则为0，
marginLeftIndex = 0
}
//循环为元素设定marginLeft(左间隔)，n = 1，不为0是略过第一个元素
for (var n = 1n <divs.lengthn++) {
divs[n].style.marginLeft = marginLeftIndex + "px"//+px 为兼容
}
}
</script>
</head>
<body>
<div id="objElement" style="width:100%">
<div style="width:100pxfloat:left">1</div><div style="width:100pxfloat:left">1</div><div style="width:100pxfloat:left">1</div><div style="width:100pxfloat:left">1</div><div style="width:100pxfloat:left">1</div>
</div>
<br/>
<div id="objElement2" style="width:100%">
<div style="width:120pxfloat:left">2</div><div style="width:120pxfloat:left">2</div><div style="width:120pxfloat:left">2</div><div style="width:120pxfloat:left">2</div>
</div>
<br/>
<div id="objElement3" style="width:100%">
<div class="div1">3</div><div class="div1">3</div><div class="div1">3</div><div class="div1">3</div><div class="div1">3</div><div class="div1">3</div>
</div>
<br/>
<table width="100%">
<tr><td id="td1"><div style="width:110pxfloat:left">4</div><div style="width:110pxfloat:left">4</div><div style="width:110pxfloat:left">4</div><div style="width:110pxfloat:left">4</div></td></tr>
<tr><td id="td2"><div class="div2">5</div><div class="div2">5</div><div class="div2">5</div><div class="div2">5</div><div class="div2">5</div><div class="div2">5</div></td></tr>
</table>
</body>
</html>
<style>table{
border-collapse: collapse
border-spacing: 0
table-layout: fixed
}
</style>
<table>
<tr>
<td width="100">怎么样让一行中每个td所占的宽度都是一样的？无论字数是多少宽度都不会随之改变的那种。应该怎么弄？</td>
<td width="100">怎么样让一行中每个td所占的宽度都是一样的？无论字数是多少宽度都不会随之改变的那种。应该怎么弄？</td>
<td width="100">怎么样让一行中每个td所占的宽度都是一样的？无论字数是多少宽度都不会随之改变的那种。应该怎么弄？</td>
</tr>
</table>
就是这样子，关键在table-layout: fixed
用百分比来做，比如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%是不能完全达到百分百，但在显示界面基本看不出什么了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）