javascript - 一排三个框，各个框的间距是15px,距离外面的白框间距也是15px，这个css怎么写？

问题描述

问题解答

貌似 flex 也能实现

小框：{

margin: 7.5px;

}

大框：{

padding: 7.5px;

}

大框padding:15px;小框margin-right:15px;margin-bottom:15px;小框nth-child(3n)的margin-right:0;last-child,nth-last-child(2),nth-last-child(3)的margin-bottom:0;

设置小数是不会生效的，有的浏览器会四舍五入，有的会直接取整，楼上解答正确，要将最后一个小框单独设置

flex布局 很好实现

nth-child(3n){

margin:0 15px;

},大框的padding:15px;小框的宽度为（大框宽度-60px)/3这样就能保证每行三个小框，布局也是固定的，小框float:left;margin-bottom: 15px;

<p>

<dl> <dt>这里是图片</dt> <dd><h1></h1><span></span></dd></dl><dl> <dt>这里是图片</dt> <dd><h1></h1><span></span></dd></dl><dl> <dt>这里是图片</dt> <dd><h1></h1><span></span></dd></dl>

</p>

p 设置内边距 paddingdl 设置 float：left;dt,dd 设置float:left;剩下的就是定义盒子的宽度高度 以及内外边距

初学新手，如有不对，大家来指正哈

本方法兼容到ie6

<style> .list{position: relative;margin-left: -15px;left: 15px; } .list li{width: 300px;height: 50px;background-color: #ccc;margin-right: 15px;margin-bottom: 15px;float: left;padding-left: 100px;position: relative; } .list li .iconfont{position: absolute;left: 10px;top: 20px; } .list li .name{font-size: 14px;color: #333; } .list li .txt{font-size: 12px;color: #666; }</style><ul class='list clearfix'> <li><i class='iconfont'>图标</i><p class='name'>标题</p><p class='txt'>描述</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>