微信扫一扫6.0w+
社区成员
多个DIV横排 div之间的间距一样
在一个div放很多的div，就是横排，比如每排5个，我想请教的是如何设置每个div之间的间距一样，而且每排的第1个div距离外层div左边的距离与每排的第5个div距离外层div右边0px，要兼容主流浏览器啊？一直没有找到设置的好办法。谢谢了
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
辰洛 2017-05-31
可以使用js来实现
var n = $("div").size() //设置浮动的div的数目
for (var i = 1; i < n; i++) {
$("div").eq(4*i-1).css({ //4代表每行显示的数目，从0开始计数
"margin-right":"0",
})
};
- 打赏
- 举报
话说有点呆 2017-05-31
支持一下2楼
- 打赏
- 举报
34818060 2017-05-29
除了flex外;也可以设置inline-block或浮动来实现
- 打赏
- 举报
沐沐坏小孩 2017-05-19
楼上正解，建议楼主好好学学选择器
- 打赏
- 举报
天际的海浪 2017-05-17
<!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>
- 打赏
- 举报
html 三个div横向显示出来,18-CSS问题-让多个div横排显示并设置间距解决方案 之前设置多个div横排显示都会使用float:left，这样使div脱离了文档流，不容易控制，不管是设置margin-left还是position，left都不会有效果。后来我尝试了使用display:inline-block,这样就可以使用marginLeft来控制多...
vue中的横向排列_DIV横向排列_CSS如何让多个div盒子并排同行显示 如何让多个div盒子并排同行div横向排列显示呢？我们先设置3个div盒子对象，什么css样式都不设置看看效果。代码如下：三个div盒子均独占一行显示div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种...
div内li标签间距_html ul li 横排 间距 怎么通过CSS来修改UL里LI之间的行间距呢？怎么通过CSS来修改UL里LI之间的行间距呢？ 。使用css语句：line-height 通过设置不同的line-height值得到不同间距。 代码： 效果： 扩展资料： line-height的可以设置三种...
html自动调整行高div,纯css自适应div高度(等比缩放) 然而实际中很多人的做法是通过js根据初始比例计算改变宽度后的高度，再应用到div上，有的甚至是直接就写死高度，宽度无论如何变化，高度都是这个样子，就会造成宽屏下，div显得矮胖，窄屏幕下，div显得瘦高。...
CSS布局——三个DIV横向竖向平均布局 div class="div-big"> <div class="div-small" style="background-color: lightcoral;"></div> <div class="div-small" style="background-color: lightgoldenrodyellow;"></div> ...
Css 实现div横向等间距排列(弹性布局) 在很多时候，都会遇到div的横向等间距排列问题，像下图这种排列，就是典型的div等间距排列。 <div class="context"> <div class="list">list1</div> <div class="list">list1</...
html 图片 并排 总宽度,完美实现两个div并排且宽度为50% 完美实现两个div并排且宽度为50%的css代码，有需要的朋友可参考。在ie8,ff3下都可以，当我用ie6一看就折行了。网上搜了搜，发现在ie6,ie7下如果总宽度为奇数就折行，为偶数正常。打个比方：总宽度为800，那2个div...
div横向拖动 vue_Vue-div横向/纵向拖拽缩放 resize[i].left+移动的距离=左边区域最后的宽度 19 var maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度 20 21 if (moveLen ) moveLen = 50 // 左边区域的最小...
网页制作div css分层,梁小芳《css+div网页设计与制作》项目四. 《梁小芳《css+div网页设计与制作》项目四.》由会员分享，可在线阅读，更多相关《梁小芳《css+div网页设计与制作》项目四.(24页珍藏版)》请在人人文库网上搜索。1、高职高专计算机教学改革新体系规划教材 CSS+DIV ...
【css】父div宽度固定，子div横向排列，排不下自动换行 如图，有n个虚线div，未设定样式时每个div独占一行，且宽度均为100%。 现有一需求，要求每个虚线div宽度为文字宽度，并横向排列，排不下时自动换行。 <style> .area { width: 800px; padding: 45px 30px;...
ul与div的边距 今天在写一个的这样排版，在一个div里面有ul，其中ul中的li是横排排放的。那么我遇到的问题是ul里面的li与div有一定的边距，如下图所示，其中蓝色方框是一个li，而白色区域是一个div，图中圈出的红色方框表示li与div...
通过div+css做出好看的横排导航栏 希望论坛大牛多指点，菜鸟一只，最近在学前端布局，因为自己刚学会的，所以分享出来给大家，希望对像我一样的菜鸟有所帮助！ 1.首先写好基本的HTML代码，这个就不必多加解释了，代码如下： 无标题文档...
css+div中的百分比自适应宽度布局 3.每一行中，如果存在多个div，尽量不要让他们的总宽度刚好等于100%。 原因是，当像素数出现小数时，浏览器是采取四舍五入的方式计算的。比如你的外框是11像素宽，里边的两个div的宽带均设置为50%，则计算为...
