如何让一行上的html元素平均排列_随笔

<html>

<head>

.div1

{

width:90px

float:left

}

.div2

{

width:80px

float:left

}

div

{

border:1px solid #EEEEEE

}

</style>

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>

<br/>

</div>

<br/>

</div>

<br/>

</table>

</body>

</html>

<style>

table{

border-collapse: collapse

border-spacing: 0

table-layout: fixed

}

</style>

<table>

<tr>

<td width="100">怎么样让一行中每个td所占的宽度都是一样的？无论字数是多少宽度都不会随之改变的那种。应该怎么弄？</td>

</tr>

</table>

就是这样子，关键在table-layout: fixed

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7416529.html

如何让一行上的html元素平均排列

发表评论

评论列表（0条）