javascript - Der Abstand zwischen den einzelnen Boxen beträgt 15 Pixel, und der Abstand zur weißen Box außerhalb beträgt ebenfalls 15 Pixel.

Question

Answer 1

貌似 flex 也能实现

Answer 2

小框：{

margin: 7.5px;

}

大框：{

padding: 7.5px;

}

Answer 3

大框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;

Answer 4

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

Answer 5

flex布局 很好实现

Answer 6

nth-child(3n){

margin:0 15px;    

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

Answer 7

<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 设置内边距 padding
dl 设置 float：left;
dt,dd 设置float:left;
剩下的就是定义盒子的宽度高度 以及内外边距

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

Answer 8

本方法兼容到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>