消息关闭
    暂无新消息!

多个DIV横排 div之间的间距一样

问题作者 : 大板牙2017-06-06发布
在一个div放很多的div,就是横排,比如每排5个,我想请教的是如何设置每个div之间的间距一样,而且每排的第1个div距离外层div左边的距离与每排的第5个div距离外层div右边0px,要兼容主流浏览器啊?一直没有找到设置的好办法。谢谢了

5个回答

︿ 1
可以使用js来实现
var n = $("div").size()   //设置浮动的div的数目
    for (var i = 1; i < n; i++) {
        $("div").eq(4*i-1).css({  //4代表每行显示的数目,从0开始计数
            "margin-right":"0",
        })
    };
︿ 1

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
#box {
background-color: #999;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 100%;
}
#box div {
border: 1px solid #f09;
background-color: #ff9;
width: 18%;
height: 60px;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
</body>
</html>